Advanced Search

Zurb - CSS3 Awesome Buttons

/ Published in: CSS
Save to your folder(s)
Zurb didn&apos;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&apos;s easier to read.<ul><li>Sizes: small, medium, large</li><li>Colors: Green, Blue, Red, Magenta, Orange, Yellow(Orangish Hover)</li><li>Sample: <pre>&lt;button class=&quot;large awesome blue&quot;&gt;Awesome Blue Button&lt;/button&gt;</pre></li></ul>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.