Get Simple CSS3 3D Buttons

Html Markup

<a href="#" class="button blue">A nice CSS3 Button</a>

Button Class and Button hover

.button{ 
    font-family: adelle,serif;
    font-style: italic;
    font-weight: 300;
    
    color: #ffffff;
    display: inline;
    
     padding: 5px 10px;
     margin: 5px 0;
    
    text-decoration: none;
    
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  
  .button:hover{ 
    position: relative;
    top: 4px;   
      
    -moz-box-shadow: 0 0 0;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
   }

Colour Class and Hover

.blue{ 
    border: 1px solid #0b4678;
    
    background: -moz-linear-gradient(90deg, #2e88e4 0%, #4badee 93.4%, #8cd7f3 100%) #3da1e9;
    background: -webkit-gradient(linear, left bottom, left top, from(#2e88e4), color-stop(0.934, #4badee), to(#8cd7f3)) #3da1e9;
    
    -moz-box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85);
    -webkit-box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85);
    box-shadow: 0 4px 0 rgba(16, 51, 106, 0.85);
   }
   
   

Extra effects Personal preference

    .blue:hover{ 
     border-bottom: 1px solid #0b4678;
       
     background: -moz-linear-gradient(90deg, #4badee 0%, #2e88e4 94%, #8cd7f3 100%) #3da1e9;
     background: -webkit-gradient(linear, left bottom, left top, from(#4badee), color-stop(0.94, #2e88e4), to(#8cd7f3)) #3da1e9; 
    }