Advanced Search

CSS3 - Fancy Nice Cool Web2.0 ZURB 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. /* @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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.