Return to Snippet

Revision: 17202
at August 26, 2009 23:45 by webdevelopertut

Initial Code
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.

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

.btn{font:13px arial;color:#fff;text-decoration:none;}
.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 change the class....

Initial URL

Initial Description

Initial Title
Create gradient buttons using css

Initial Tags
css, button

Initial Language