Posted By

brandonjp on 08/21/10


Tagged

css cool web20 corners web border ROUNDED CSS3 20 rgba buttons radius border-radius fancy zurb


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jplr
baczoni


CSS3 - Fancy Nice Cool Web2.0 ZURB Super Awesome Buttons with CSS3 and RGBA


 / Published in: CSS
 

  1. /* @group ZURB Awesome Buttons */
  2.  
  3. /*
  4.  * 201008201230 - brandonjp
  5.  *
  6.  * Adapted from http://bit.ly/zurb-buttons
  7.  * Demo at http://bit.ly/zurb-buttons-demo
  8.  *
  9.  * USAGE: Give your element class "button" or use the HTML5 <button>
  10.  *
  11.  */
  12.  
  13. .button, .button:visited, button, button:visited {
  14. cursor: pointer;
  15. position: relative;
  16. display: inline-block;
  17. padding: 5px 10px 6px;
  18.  
  19. color: #fff;
  20. line-height: 1;
  21. font-weight: bold;
  22. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  23. text-decoration: none;
  24.  
  25. background: #222 url(images/alert-overlay.png) repeat-x;
  26. border-bottom: 1px solid rgba(0,0,0,0.25);
  27.  
  28. border-radius: 5px;
  29. -khtml-border-radius: 5px;
  30. -moz-border-radius: 5px;
  31. -webkit-border-radius: 5px;
  32.  
  33. box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  34. -khtml-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  35. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  36. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  37. }
  38.  
  39. .button:hover, button:hover {
  40. background-color: #111;
  41. color: #fff;
  42. }
  43.  
  44. .button:active, button:active {
  45. top: 1px;
  46. }
  47.  
  48. .small.button, .small.button:visited,
  49. button.small, button.small:visited {
  50. font-size: 11px;
  51. }
  52.  
  53. .button, .button:visited, button, button:visited,
  54. .medium.button, .medium.button:visited,
  55. button.medium, button.medium:visited {
  56. font-size: 13px;
  57. }
  58.  
  59. .large.button, .large.button:visited,
  60. button.large, button.large:visited {
  61. font-size: 14px;
  62. padding: 8px 14px 9px;
  63. }
  64.  
  65. .green.button, .green.button:visited,
  66. button.green, button.green:visited {
  67. background-color: #91bd09;
  68. }
  69.  
  70. .green.button:hover,
  71. button.green:hover {
  72. background-color: #749a02;
  73. }
  74.  
  75. .blue.button, .blue.button:visited,
  76. button.blue, button.blue:visited {
  77. background-color: #2daebf;
  78. }
  79.  
  80. .blue.button:hover,
  81. button.blue:hover {
  82. background-color: #007d9a;
  83. }
  84.  
  85. .red.button, .red.button:visited,
  86. button.red, button.red:visited {
  87. background-color: #e33100;
  88. }
  89.  
  90. .red.button:hover,
  91. button.red:hover {
  92. background-color: #872300;
  93. }
  94.  
  95. .magenta.button, .magenta.button:visited,
  96. button.magenta, button.magenta:visited {
  97. background-color: #a9014b;
  98. }
  99.  
  100. .magenta.button:hover,
  101. button.magenta:hover {
  102. background-color: #630030;
  103. }
  104.  
  105. .orange.button, .orange.button:visited,
  106. button.orange, button.orange:visited {
  107. background-color: #ff5c00;
  108. }
  109.  
  110. .orange.button:hover,
  111. button.orange:hover {
  112. background-color: #d45500;
  113. }
  114.  
  115. .yellow.button, .yellow.button:visited,
  116. button.yellow, button.yellow:visited {
  117. background-color: #ffb515;
  118. }
  119.  
  120. .yellow.button:hover,
  121. button.yellow:hover {
  122. background-color: #fc9200;
  123. }
  124.  
  125.  
  126. /* @end ZURB Awesome Buttons */

Report this snippet  

You need to login to post a comment.