Cool css3 buttons design

button design using css3
<a href="#" class="green button big" target="_blank"><span>$11.99 — Buy Now</span></a>

<a href="#" class="blue button big" target="_blank"><span>$11.99 — Buy Now</span></a>

<a href="#" class="green button" target="_blank">$11.99 — Buy Now</a>

<a href="#" class="blue button" target="_blank">$11.99 — Buy Now</a>

<a href="#" class="green button" target="_blank"><span class="inline">Buy Now</span>$11.99</a>

<a href="#" class="blue button" target="_blank"><span class="inline">Buy Now</span>$11.99</a>
.button{text-decoration:none;border:none;height:43px;-webkit-border-radius:5px;-webkit-background-clip:padding-box;-moz-border-radius:5px;-moz-background-clip:padding;border-radius:5px;background-clip:padding-box;font-size:18px;text-shadow:0 1px 1px rgba(0,0,0,0.2);line-height:43px;text-transform:uppercase;display:inline-block;white-space:nowrap;border-bottom:0;-webkit-transition:background-color .1s linear 0 .1s linear;-moz-transition:background-color .1s linear 0 .1s linear;-o-transition:background-color .1s linear box-shadow .1s linear;-ms-transition:background-color .1s linear box-shadow .1s linear;transition:background-color .1s linear box-shadow .1s linear;background-color:#95999b;-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #95999b;-moz-box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #95999b;box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #95999b;color:#fff;position:relative;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);padding:2px 25px 0;}
.button:hover{background-color:#9da1a2;}
.button:active{-webkit-box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #95999b;-moz-box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #95999b;box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #95999b;-webkit-transform:translate3d(0,2px,0);-moz-transform:translate3d(0,2px,0);-o-transform:translate3d(0,2px,0);-ms-transform:translate3d(0,2px,0);transform:translate3d(0,2px,0);}
.button.blue{background-color:#3498db;-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #3498db;-moz-box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #3498db;box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #3498db;color:#fff;}
.button.blue:hover{background-color:#419fdd;}
.button.blue:active{-webkit-box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #3498db;-moz-box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #3498db;box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #3498db;}
.button.blue span{color:#1D587E;text-shadow:0 2px 0 rgba(255,255,255,0.29);position:relative;}
.button.blue span.inline{display:block;color:#1D587E;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,0.29);position:relative;top:7px;line-height:4px;text-align:center;}
.button.green{background-color:#4ec067;-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #4ec067;-moz-box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #4ec067;box-shadow:0 2px 0 rgba(0,0,0,0.15), 0 2px 0 #4ec067;color:#fff;}
.button.green:hover{background-color:#59c471;}
.button.green:active{-webkit-box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #4ec067;-moz-box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #4ec067;box-shadow:0 0 0 rgba(0,0,0,0.15), 0 0 0 #4ec067;}
.button.green strong{text-shadow:0 1px 1px rgba(15,146,70,0.75);display:block;}
.button.green span{color:#11773d;text-shadow:0 2px 0 rgba(255,255,255,0.29);position:relative;}
.button.green span.inline{display:block;color:#11773d;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,0.29);position:relative;top:7px;line-height:4px;text-align:center;}
.button.blue.big,.button.green.big{height:63px;line-height:63px;text-align:center;}
Cool css3 buttons design Cool css3 buttons design Reviewed by Bhaumik Patel on 8:38 PM Rating: 5