Advanced Search

Super Awesome Buttons with CSS3 and RGBA

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .awesome{
  2. background: #222 url(/images/alert-overlay.png) repeat-x;
  3. display: inline-block;
  4. padding: 5px 10px 6px;
  5. color: #fff;
  6. text-decoration: none;
  7. font-weight: bold;
  8. line-height: 1;
  9. -moz-border-radius: 5px;
  10. -webkit-border-radius: 5px;
  11. -moz-box-shadow: 0 1px 3px #999;
  12. -webkit-box-shadow: 0 1px 3px #999;
  13. text-shadow: 0 -1px 1px #222;
  14. border-bottom: 1px solid #222;
  15. position: relative;
  16. cursor: pointer;
  17. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  18. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  19. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  20. border-bottom: 1px solid rgba(0,0,0,0.25);
  21. }
  22.  
  23.  
  24. * Sizes ---------- */
  25. .small.awesome {
  26. font-size: 11px;
  27. }
  28. .medium.awesome {
  29. font-size: 13px;
  30. }
  31. .large.awesome {
  32. font-size: 14px;
  33. padding: 8px 14px 9px;
  34. }
  35.  
  36. /* Colors ---------- */
  37. .blue.awesome {
  38. background-color: #2daebf;
  39. }
  40. .red.awesome {
  41. background-color: #e33100;
  42. }
  43. .magenta.awesome {
  44. background-color: #a9014b;
  45. }
  46. .orange.awesome {
  47. background-color: #ff5c00;
  48. }
  49. .yellow.awesome {
  50. background-color: #ffb515;
  51. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.