Buttons with CSS3 and RGBA


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



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

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.