Creating cool looking CSS3 rounded buttons

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.

Leave a Reply