To craete a button simply give your element a div class of button and for button CSS use the following code:
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
padding: 6px 17px;
text-shadow: 0 1px 1px #333;
/*make the button round */
-webkit-border-radius: 5px; /*support for Safari, Chrome */
-moz-border-radius: 5px; /*support for firefox */
border-radius: 5px; /*support for ie9*/
/*create a small shadow */
-webkit-box-shadow: 0 1px 2px #333;
-moz-box-shadow: 0 1px 2px #333;
box-shadow: 0 1px 2px #333;
color: #fff;
border: solid 1px #0085CF;
/*make background a gradient */
background: #48B9FD; background: -webkit-gradient(linear, left top, left bottom, from(#48B9FD), to(#0090DF));
background: -moz-linear-gradient(top, #48B9FD, #0090DF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#48B9FD', endColorstr='#0090DF'); /* gradient support for IE*/
position:relative;
}
the above code will produce the following result
Fancy CSS3 Button
It will work in all the browsers except that IE6,7,8 does not support the rounded boxes and shadows easily (that will be another tutorial) . This of course applies to other elements as well like boxes and input fields. Got questions? Use comments below.