Posted By

webdevelopertut on 08/26/09


Tagged

css button gradient


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

vali29
zartgesotten


Create gradient buttons using css


 / Published in: CSS
 

URL: http://htmlcsstutorials.blogspot.com/2009/08/create-gradient-buttons-using-css.html

  1. 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.
  2.  
  3. HTML:
  4. <a href="#" class="btn ovrlay ">Super Awesome Button</a>
  5.  
  6. CSS:
  7. .btn{font:13px arial;color:#fff;text-decoration:none;}
  8. .btn:hover{background:#630030;}
  9. .ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
  10. .btn{background-color:#E33100;border:1px solid #7c1f06}
  11.  
  12. Just change the color of the .btn class, similarly you can have different n number of buttons by just change the class....

Report this snippet  

You need to login to post a comment.