CREATING A BUTTON USING PURELY CSS3

Gone are the days of using images for buttons! These days most modern browsers have access to tools such as gradients, drop shadows and rounded corners allowing us to create neat buttons using purely CSS3 and today I’ll show you how.
STEP 1: THE HTML

<a href="#" class="button">Handy HTML</a>

…this is a simple anchor tag with an assigned class name of “button”.
STEP 2: THE CSS

.button {
width: 150px;
height: 40px;
line-height: 20px;
color: white;
text-decoration: none;
font: bold 16px Verdana, Geneva, sans-serif;
display: block;
text-align: center;

/*----- background gradient -----*/
background: #014464;
background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));

/*---- border radius ----*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #368DBE;
border-top: 1px solid #c3d6df;

/*---- text shadow ----*/
text-shadow: 1px 1px 1px black;

/*---- box shadow ----*/
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
}

/*---- hover state ----*/
.button:hover {
background: #014464;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}

/*---- clicked state ----*/
.button:active {
-moz-box-shadow: inset 0 2px 5px #02284b;
-webkit-box-shadow: inset 0 2px 5px #02284b;
box-shadow: inner 0 2px 5px #02284b;
}

I have labelled the CSS code in sections so you can clearly see what each part of the code does. Feel free to have a play around with it, change the colours or the radius on the corners for example.


Let me know if you run into any problems, enjoy!