Advanced Search

Create gradient buttons using css

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your 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....

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.