Advanced Search

Zurb.com Awesome Button

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .awesome {
  2. 	background: #A9014B;
  3. 	display: inline-block;
  4. 	padding: 5px 10px 6px;
  5. 	color: #fff;
  6. 	text-decoration: none;
  7. 	font-weight: bold;
  8. 	line-height: 1;
  9. 	-moz-border-radius: 5px;
  10. 	-webkit-border-radius: 5px;
  11. 	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  12. 	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  13. 	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  14. 	border-bottom: 1px solid rgba(0,0,0,0.25);
  15. 	position: relative;
  16. 	cursor: pointer;
  17. }
  18.  
  19. .awesome:hover {
  20. 	background: #C9025C;
  21. }
  22.  
  23.  
  24. /* Sizes ---------- */
  25. .small.awesome {
  26. font-size: 11px;
  27. }
  28. .medium.awesome {
  29. font-size: 13px;
  30. }
  31. .large.awesome {
  32. font-size: 14px;
  33. padding: 8px 14px 9px;
  34. }
  35.  
  36. /* Colors ---------- */
  37. .blue.awesome {
  38. background-color: #2daebf;
  39. }
  40. .red.awesome {
  41. background-color: #e33100;
  42. }
  43. .magenta.awesome {
  44. background-color: #a9014b;
  45. }
  46. .orange.awesome {
  47. background-color: #ff5c00;
  48. }
  49. .yellow.awesome {
  50. background-color: #ffb515;
  51. }

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.