Posted By

LeeRJohnson on 10/17/09


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

wizard04
thatryan


Super Awesome Buttons with CSS3 and RGBA


 / Published in: CSS
 

URL: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

  1. .awesome, .awesome:visited {
  2. background: #222 url(http://zurb.com/images/alert-overlay.png) repeat-x;
  3. display: inline-block;
  4. padding: 5px 10px 6px;
  5. color: #fff;
  6. text-decoration: none;
  7. -moz-border-radius: 5px;
  8. -webkit-border-radius: 5px;
  9. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  10. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  11. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  12. border-bottom: 1px solid rgba(0,0,0,0.25);
  13. position: relative;
  14. cursor: pointer;
  15. }
  16.  
  17. .awesome:hover { background-color: #111; color: #fff; }
  18. .awesome:active { top: 1px; }
  19. .small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
  20. .awesome, .awesome:visited,
  21. .medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
  22. .large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }
  23.  
  24. .green.awesome, .green.awesome:visited { background-color: #91bd09; }
  25. .green.awesome:hover { background-color: #749a02; }
  26. .blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
  27. .blue.awesome:hover { background-color: #007d9a; }
  28. .red.awesome, .red.awesome:visited { background-color: #e33100; }
  29. .red.awesome:hover { background-color: #872300; }
  30. .magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
  31. .magenta.awesome:hover { background-color: #630030; }
  32. .orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
  33. .orange.awesome:hover { background-color: #d45500; }
  34. .yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
  35. .yellow.awesome:hover { background-color: #fc9200; }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: illegal3alien on August 5, 2010

border-top border-left border-right 0px

Should fix any problems with a white border.

You need to login to post a comment.