basic-button.css

button {
	/* Base Style */
	position:relative;
	padding:15px;
	margin:10px;
	width:250px;
	
	/* Font Styling */
	font-size:20px;
	font-weight:bold;
	color:#FFF;
	}

basic-button.html

<button>I am a button!</button>

down-button.css

/* Styling the Button */
.down {

	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	background:#1abc9c;
	border: solid 1px #16a085;
	
	/* Note the parameters 0px 9px 0px
	 * This adds the 9px sized shadow on the buttom of the button
	 */
	-webkit-box-shadow: 0px 9px 0px #16a085;
  	-moz-box-shadow: 0px 9px 0px #16a085;
  	box-shadow: 0px 9px 0px #16a085;
	}
	
	
/* When the button is clicked */	
.down:active{
	
  	position:relative;
  	top:7px;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	/* Note thet we change the 9px to 2px 
	 * So we have add the feel that the buttons it pushed when clicked
	*/
  	-webkit-box-shadow: 0px 2px 0px #16a085;
  	-moz-box-shadow: 0px 2px 0px #16a085;
  	box-shadow: 0px 2px 0px #16a085;
}

down-button.html

<!-- We add a class to button  -->
<button class="down">I am a Button!</button>

left-button.css

.right {
	background:#3498db;
	border: solid 1px #2980b9;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	/* Note the parameters -9px 0px 0px
	 * This adds the 9px sized shadow on the buttom of the button
	 */	
	-webkit-box-shadow: -9px 0px 0px #2980b9;
    	-moz-box-shadow: -9px 0px 0px #2980b9;
    	box-shadow: -9px 0px 0px #2980b9;
	}
	
.right:active{
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
    	position:relative;
    	bottom:7px;
	
	/* Note thet we change the -9px to -2px 
	* So we have add the feel that the buttons it pushed when clicked
	*/    
	-webkit-box-shadow: -2px 0px 0px #2980b9;
    	-moz-box-shadow: -2px 0px 0px #2980b9;
    	box-shadow: -2px 0px 0px #2980b9;
}

right-button.css

.right {
	background:#3498db;
	border: solid 1px #2980b9;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	/* Note the parameters 9px 0px 0px
	 * This adds the 9px sized shadow on the buttom of the button
	 */	
	-webkit-box-shadow: 9px 0px 0px #2980b9;
    	-moz-box-shadow: 9px 0px 0px #2980b9;
    	box-shadow: 9px 0px 0px #2980b9;
	}
	
.right:active{
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
    	position:relative;
    	bottom:7px;
	
	/* Note thet we change the 9px to 2px 
	 * So we have add the feel that the buttons it pushed when clicked
	*/    
	-webkit-box-shadow: 2px 0px 0px #2980b9;
    	-moz-box-shadow: 2px 0px 0px #2980b9;
    	box-shadow: 2px 0px 0px #2980b9;
}

up-button.css

.up {
	background:#3498db;
	border: solid 1px #2980b9;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	/* Note the parameters 0px -9px 0px
	 * This adds the 9px sized shadow on the buttom of the button
	 */	
	-webkit-box-shadow: 0px -9px 0px #2980b9;
    	-moz-box-shadow: 0px -9px 0px #2980b9;
    	box-shadow: 0px -9px 0px #2980b9;
	}
	
.up:active{
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
    	position:relative;
    	bottom:7px;
	
	/* Note thet we change the -9px to -2px 
	 * So we have add the feel that the buttons it pushed when clicked
	*/    
	-webkit-box-shadow: 0px -2px 0px #2980b9;
    	-moz-box-shadow: 0px -2px 0px #2980b9;
    	box-shadow: 0px -2px 0px #2980b9;
}