Making Awesome CSS Buttons with Gradient, Round Border and Drop Shadow

Hellow,

This will be a very quick and short guide on how to code any button of your liking into real by ONLY using CSS and without slicing as images.

ALL the buttons here are compatible with the following browsers:
IE8+
Chrome
Safari
Opera
Firefox3+

Gradient

Syntax

Standard
To add linear gradient from top to bottom starting from black and ending with white

background: linear-gradient (top,#000000,#FFFFFF);

Safari 5.1, Chrome 10+
background: -webkit-linear-gradient (top,#000000,#FFFFFF);

Safari 4-5, Chrome 1-9
background: -webkit-gradient (linear,top,bottom, from(#000000), to(#FFFFFF));

Firefox 3.6+
background: -moz-linear-gradient (top,#000000,#FFFFFF);

IE 10+
background: -ms-linear-gradient (top,#000000,#FFFFFF);

Opera 11.10+
background: -o-linear-gradient (top,#000000,#FFFFFF);


Ex:

Type:                Linear Gradient
Starting color:    #0d66e0
Ending Color:    #74a0dc

1. #btn{
2.         background: linear-gradient(top, #0d66e0, #74a0dc);
3.         background: -webkit-gradient(linear,top,bottom,from(#0d66e0),to(#74a0dc));
4.         background: -webkit-linear-gradient(top, #0d66e0, #74a0dc);
5.         background: -moz-linear-gradient(top, #0d66e0, #74a0dc);
6.         background: -ms-linear-gradient(top, #0d66e0, #74a0dc);
7.         background: -o-linear-gradient(top, #0d66e0, #74a0dc);
9.         width:150px;
10.         height:50px;
11.         color:white;
12.         text-align:center;
13.         line-height:45px;
14. }

Type:                Radial Gradient
Starting color:    #474444
Ending Color:    #7e7b7b

1. #btn2{
2.         background: radial-gradient(top, #474444, #7e7b7b);
3.         background: -webkit-gradient(radial,top,bottom,from(#474444),to(#7e7b7b));
4.         background: -webkit-radial-gradient(top, #474444, #7e7b7b);
5.         background: -moz-radial-gradient(top, #474444, #7e7b7b);
6.         background: -ms-radial-gradient(top, #474444, #7e7b7b);
7.         background: -o-radial-gradient(top, #474444, #7e7b7b);
9.         width:150px;
10.         height:50px;
11.         color:white;
12.         text-align:center;
13.         line-height:45px;
14. }

Round border

Syntax

Standard
border-radius: 5px;

You can also specify them seperately as
border-radius: 5px 5px 10px 10px;

Safari, Chrome
-webkit-border-radius: 5px;

Firefox
-moz-border-radius: 5px;


Round border : 5px
Border color :  #777777
Border width:   2px
Gradient:          #cfcfcf -> #e9e9e9

1. #btn3{
2.         background: linear-gradient(top, #cfcfcf, #e9e9e9);
3.         background: -webkit-gradient(linear,top,bottom,from(#cfcfcf),to(#e9e9e9));
4.         background: -webkit-linear-gradient(top, #cfcfcf, #e9e9e9);
5.         background: -moz-linear-gradient(top, #cfcfcf, #e9e9e9);
6.         background: -ms-linear-gradient(top, #cfcfcf, #e9e9e9);
7.         background: -o-linear-gradient(top, #cfcfcf, #e9e9e9);
9.         border:2px solid #777777;
10.         border-radius:5px;
11.         -webkit-border-radius:5px;
12.         -moz-border-radius:5px;
13.        
15.         width:150px;
16.         height:50px;
17.         color:#3b3939;
18.         text-align:center;
19.         line-height:45px;
20. }

Drop Shadow

Syntax
box-shadow: 5px 5px 3px 10px;

this one is a bit tricky, the values are for
box-shadow: horiz-shadow vert-shadow blur spread color inset;


Safari, Chrome
-webkit-box-shadow: 5px 5px 3px 10px;

Firefox
-moz-box-shadow: 5px 5px 3px 10px;

Box Shadow: 0px 0px 5px 0px


Round border : 5px
Border color :  #777777
Border width:   2px
Gradient:          #cfcfcf -> #e9e9e9

1. #btn4{
2.         background: linear-gradient(top, #cfcfcf, #e9e9e9);
3.         background: -webkit-gradient(linear,top,bottom,from(#cfcfcf),to(#e9e9e9));
4.         background: -webkit-linear-gradient(top, #cfcfcf, #e9e9e9);
5.         background: -moz-linear-gradient(top, #cfcfcf, #e9e9e9);
6.         background: -ms-linear-gradient(top, #cfcfcf, #e9e9e9);
7.         background: -o-linear-gradient(top, #cfcfcf, #e9e9e9);
9.         border:2px solid #777777;
10.         border-radius:5px;
11.         -webkit-border-radius:5px;
12.         -moz-border-radius:5px;
14.         box-shadow:0px 0px 5px 0px;
15.         -webkit-box-shadow:0px 0px 5px 0px;
16.         -moz-box-shadow:0px 0px 5px 0px;
18.         width:150px;
19.         height:50px;
20.         color:#3b3939;
21.         text-align:center;
22.         line-height:45px;
23. }

Not much of a big tute, but hope you enjoy it :D