Create gradient buttons using css

Creating a glossy gradient button effect is easy to make in photoshop. But for example, in your site you want ten buttons to be created. So what you will do, as of all we will be creating 10 different button in photoshop.

But all of these button will make your page weight of having 10 request to the site. So here is a simple trick how to create different buttons with single transparent image.

Follow this simple steps... Download the png file to have the gradient button. And copy the HTML and CSS code. So you will not be creating different image, just this png image will do the magic.

HTML:
<a href="#" class="btn ovrlay ">Super Awesome Button</a>

CSS:
.btn{font:13px arial;color:#fff;text-decoration:none;}
.btn:hover{background:#630030;}
.ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
.btn{background-color:#E33100;border:1px solid #7c1f06}

Just change the color of the .btn class, similarly you can have different n number of buttons by just class....

Before Gradient effect


After Gradient Effect


PNG Transparent Image

Just copy the above png image...

Note:
Do not forget to put png hack for ie6.