Creating a button using purely CSS3

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.