Posted By

bullzito on 10/16/10


Tagged

css-button-CSS3


Versions (?)

Who likes this?

9 people have marked this snippet as a favorite

stefanszoltysek
miguelcanijo
maltem
cjmling
Carolyne
nickyb
bullzito
baczoni
benyates1


CSS3 Buttons (Call to Action)


 / Published in: CSS
 

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

CSS3 Button\r\n

This uses no images and has fall-back colors for IE browsers.

  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>

Report this snippet  

You need to login to post a comment.