CSS3 navigation buttons

Slick CSS3 Buttons

HTML code:

<a href=”#”>Button</a>

CSS class code:

.button {
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }

.button:active {

position: relative; top: 3px;

-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);

-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);

box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); }

.button:active:after {

content: “”; width: 100%;

height: 3px;

background: #fff;

position: absolute; bottom: -1px; left: 0; }

Sample view here:

http://inspectelement.com/demos/css3/buttons/#

Please share it
Email this to someoneShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInShare on Facebook