Posted By

illegal3alien on 08/05/10


Tagged

css awesome CSS3 buttons zurb


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

craigmaclean
belchar
bok


Zurb - CSS3 Awesome Buttons


 / Published in: CSS
 

URL: http://www.zurb.com/playground/super-awesome-buttons

Zurb didn't post the full code, but they made a short post tutorial and it appears to be open source. I found the code here and fixed a border problem, and I also cleaned it up so it's easier to read.

  • Sizes: small, medium, large
  • Colors: Green, Blue, Red, Magenta, Orange, Yellow(Orangish Hover)
  • Sample:
    <button class="large awesome blue">Awesome Blue Button</button>

  1. .awesome, .awesome:visited {
  2. background: #222 url(http://zurb.com/images/alert-overlay.png) repeat-x;
  3. border: 0px;
  4. border-bottom: 1px solid rgba(0,0,0,0.25);
  5. color: #fff;
  6. cursor: pointer;
  7. display: inline-block;
  8. font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
  9. -webkit-border-radius: 5px;
  10. -moz-border-radius: 5px;
  11. border-radius:5px;
  12. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  13. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  14. box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  15. padding: 5px 10px 6px;
  16. position: relative;
  17. text-decoration: none;
  18. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  19. }
  20. .awesome:hover {
  21. background-color: #111;
  22. color: #fff;
  23. }
  24. .awesome:active {
  25. top: 1px;
  26. }
  27. .small.awesome, .small.awesome:visited {
  28. font-size: 11px;
  29. }
  30. .awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited {
  31. font-size: 13px;
  32. font-weight: bold;
  33. line-height: 1;
  34. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  35. }
  36. .large.awesome, .large.awesome:visited {
  37. font-size: 14px;
  38. padding: 8px 14px 9px;
  39. }
  40. .green.awesome, .green.awesome:visited {
  41. background-color: #91bd09;
  42. }
  43. .green.awesome:hover {
  44. background-color: #749a02;
  45. }
  46. .blue.awesome, .blue.awesome:visited {
  47. background-color: #2daebf;
  48. }
  49. .blue.awesome:hover {
  50. background-color: #007d9a;
  51. }
  52. .red.awesome, .red.awesome:visited {
  53. background-color: #e33100;
  54. }
  55. .red.awesome:hover {
  56. background-color: #872300;
  57. }
  58. .magenta.awesome, .magenta.awesome:visited {
  59. background-color: #a9014b;
  60. }
  61. .magenta.awesome:hover {
  62. background-color: #630030;
  63. }
  64. .orange.awesome, .orange.awesome:visited {
  65. background-color: #ff5c00;
  66. }
  67. .orange.awesome:hover {
  68. background-color: #d45500;
  69. }
  70. .yellow.awesome, .yellow.awesome:visited {
  71. background-color: #ffb515;
  72. }
  73. .yellow.awesome:hover {
  74. background-color: #fc9200;
  75. }

Report this snippet  

Comments

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

awesome!

Posted By: illegal3alien on August 6, 2010

Here are some alternate yellow colors:

.yellow.awesome, .yellow.awesome:visited {
    background-color: #f4d32f;
}
.yellow.awesome:hover {
    background-color: #ffb515;
}

Those change the color to a brighter yellow rather than orange.

You need to login to post a comment.