.button {  
text-decoration: none;  
color: #fff;  
font-weight: bold;  
padding: 12px 20px;  
font-size: 18px;  
border-radius: 10px;  
background-color: #666666;
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
position: relative;  
border-bottom: 1px solid rgba(255,255,255,0.2);  
display: inline-block;  
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);  
margin-bottom: 40px;  
  }  

  .button:hover {  
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .shield {  
border-radius: 5px 5px 35px 35px;
padding-left: 25px;  
padding-right: 25px;  
  }  

  .criss-cross {  
border-radius: 35px 5px;
  }  

  .rectangular {  
border-radius: 10px / 35px;  
  }  

  .one-corner {  
border-radius: 5px 5px 35px 5px;  
padding-right: 25px;  
  }  

  .pressure {  
  }  

  .button {  
margin-right: 20px;  
  }  

  .button:active {  
top: 7px;  
box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
  }  

  .red {
background-color: #c34747;
box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .red:hover {  
box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .red:active {  
box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);  
  }  

  .orange {
background-color: #c37846;
box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .orange:hover {  
box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
  }  

  .orange:active {  
box-shadow: 0 2px 0 #5e3a25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
  }  

  .green {
background-color: #7fc345;
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .green:hover {  
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .green:active {  
box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
  }  

  .pink {  
box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
background-color: #d7298b;  
  }  

  .pink:hover {  
box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .pink:active {  
box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);  
  }  

  .blue {  
background: #2a8ad8;  
box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .blue:hover {  
box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  
  .blue:active {  
box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);  
  }  

  .purple {  
background-color: #8a26d3;  
box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .purple:hover {  
box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);  
  }  

  .purple:active {  
box-shadow: 0 2px 0 #42255e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);  
  }

<a href="#" class="button">A BUTTON</a>  
  <a href="#" class="button red shield">A BUTTON</a>  
  <a href="#" class="button orange rectangular">A BUTTON</a>  
  <a href="#" class="button green criss-cross">A BUTTON</a>  
  <a href="#" class="button blue one-corner">A BUTTON</a>  
  <a href="#" class="button pink">A BUTTON</a>  
  <a href="#" class="button purple shield">A BUTTON</a>  

  <a href="#" class="button">A BUTTON</a>  
  <a href="#" class="button red shield">A BUTTON</a>  
  <a href="#" class="button orange rectangular">A BUTTON</a>  
  <a href="#" class="button green criss-cross">A BUTTON</a>  
  <a href="#" class="button blue one-corner">A BUTTON</a>  
  <a href="#" class="button pink">A BUTTON</a>  
  <a href="#" class="button purple shield">A BUTTON</a>  
  <a href="#" class="button">A REALLY BIG BUTTON</a>  
  <a href="#" class="button red shield">SMALL</a>  
  <a href="#" class="button orange rectangular">A</a>  
  <a href="#" class="button green criss-cross">L</a>  
  <a href="#" class="button blue one-corner">A BUTTON</a>  
  <a href="#" class="button pink">A BUTTON</a>  
  <a href="#" class="button purple shield">A BUTTON</a>