Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Wednesday, August 12, 2009

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.

Labels: , ,

3 Comments:

Anonymous Anonymous said...

This is terrific, thanks for the howto.

August 19, 2009 at 9:04:00 AM PDT  
Blogger Ashok Rathod said...

Nice..But now you can create gradient buttons without use of images.. have a look at this....
http://www.blog.pixel2pixeldesign.com/beautiful-css3-gradient-buttons/

Regards,
Ashok Rathod

July 5, 2011 at 6:13:00 AM PDT  
Blogger Albert Andrada said...

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

May 6, 2015 at 8:01:00 AM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home