Advanced Search

CSS3 Buttons (Call to Action)

/ Published in: CSS
Save to your folder(s)
CSS3 Button\\r\\n<p>This uses no images and has fall-back colors for IE browsers.</p>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* CSS3 BUTTON 
  2. ----------------------------------------------------- */
  3.  
  4. .button {
  5. 	border:1px solid #1D4253;
  6. 	color:#FFFFFF;
  7. 	text-shadow:0 -1px 0 #004e68;
  8. 	font-size:12px;
  9. 	display:inline-block;
  10. 	margin:8px 0;
  11. 	text-align:center;
  12. 	-moz-border-radius:5px;
  13. 	-webkit-border-radius:5px;
  14. 	border-radius:5px;
  15. 	background-color:#007197;
  16. 	background-image:
  17. 	-webkit-gradient(
  18. 		linear,
  19. 		left bottom,
  20. 		left top,
  21. 		color-stop(0, rgb(0,93,124)),
  22. 		color-stop(1, rgb(0,136,181))
  23. 	);
  24. 	background-image:
  25. 	-moz-linear-gradient(
  26. 		center bottom,
  27. 		rgb(0,93,124) 0%,
  28. 		rgb(0,136,181) 100%
  29. 	);
  30. 	-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
  31. 	-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
  32. 	box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
  33. }
  34.  
  35. .button:hover {
  36. 	background-color:#0081ab;
  37. 	background-image:
  38. 	-webkit-gradient(
  39. 		linear,
  40. 		left bottom,
  41. 		left top,
  42. 		color-stop(0, rgb(0,116,154)),
  43. 		color-stop(1, rgb(0,165,198))
  44. 	);
  45. 	background-image:
  46. 	-moz-linear-gradient(
  47. 		center bottom,
  48. 		rgb(0,116,154) 0%,
  49. 		rgb(0,165,198) 100%
  50. 	);
  51. 	text-decoration:none;
  52. }
  53.  
  54. .button:active {
  55. 	background-color:#006486;
  56. 	background-image:
  57. 	-webkit-gradient(
  58. 		linear,
  59. 		left bottom,
  60. 		left top,
  61. 		color-stop(0, rgb(0,133,166)),
  62. 		color-stop(1, rgb(0,83,122))
  63. 	);
  64. 	background-image:
  65. 	-moz-linear-gradient(
  66. 		center bottom,
  67. 		rgb(0,133,166) 0%,
  68. 		rgb(0,83,122) 100%
  69. 	);
  70. 	-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
  71. 	-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
  72. 	box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
  73. }
  74.  
  75. .button span {
  76. 	padding:8px 20px;
  77. 	border-top:1px solid #00B8D3;
  78. 	display:block;
  79. 	font-weight:bold;
  80. 	-moz-border-radius:5px;
  81. 	-webkit-border-radius:5px;
  82. 	border-radius:5px;	
  83. }
  84.  
  85. .button span:active { border-top-color:transparent; }
  86.  
  87. /* HTML MARK-UP
  88. ----------------------------------------------------- */
  89.  
  90. <a href="#" class="button"><span>CSS3 Button - No Images</span></a>

URL: http://marioluevanos.com/playground/CSS3%20Button/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.