Sexy Buttons

by Umar

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div>
    
    <a href="#" id="red">Push the button</a>
    
</div>

<div>
    
    <a href="#" id="blue">Push the button</a>
    
</div>

CSS

body{
 background:#f0f0f0;
 padding:50px;  
}

div{
 padding:6px 6px 10px 6px;
 background:#f0f0f0;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
 float:left;
 margin-right:20px;
 -webkit-border-radius:5px;
 -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
}

#red{
 width:220px;
 height:40px;
 text-align:center;
 color:#FFF;
 text-decoration:none;
 line-height:43px;
 font-family:'Oswald', Helvetica;
 text-shadow:-1px -1px 0 #A84155;
 display:block;
 background: #D25068;
 border:1px solid #D25068;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F66C7B), to(#D25068));
 -webkit-border-radius:5px;
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

#red:hover{
 background: #F66C7B;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D25068), to(#F66C7B));   
}

#red:active{
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;  position:relative;
 top:5px;
}

#blue{
 width:220px;
 height:40px;
 text-align:center;
 color:#FFF;
 text-decoration:none;
 line-height:43px;
 font-family:'Oswald', Helvetica;
 text-shadow:-1px -1px 0 #2C7982;
 display:block;
 background: #3EACBA;
 border:1px solid #379AA4;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#48C6D4), to(#3EACBA));
 -webkit-border-radius:5px;
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

#blue:hover{
 background: #48C6D4;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#3EACBA), to(#48C6D4));   
}

#blue:active{
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;  position:relative;
 top:5px;
}