CSS3 Button with hover over, shadowing, and gradient


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



Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <meta charset="utf-8">
  5. <title>CSS3 Buttons</title>
  6.  
  7. body {
  8. width: 400px;
  9. margin: 200px auto;
  10. background: #666;
  11. }
  12.  
  13. .button {
  14. width: 400px;
  15. height: 100px;
  16. color: white;
  17. text-decoration: none;
  18. font-size: 50px;
  19. font-family: helvetica, arial;
  20. font-weight: bold;
  21. display: block;
  22. /*-- set line-height relative to height to center the text horizontally and vertically*/
  23. line-height: 100px;
  24. text-align: center;
  25. position: relative;
  26.  
  27. /* BACKGROUND GRADIENTS */
  28. background: #014464;
  29. background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
  30. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
  31.  
  32.  
  33. /* BORDER RADIUS */
  34. -moz-border-radius: 10px;
  35. -webkit-border-radius: 10px;
  36. border-radius: 10px;
  37.  
  38. border: 1px solid #368DBE;
  39. border-top: 1px solid #c3d6df;
  40.  
  41.  
  42. /* TEXT SHADOW */
  43.  
  44. text-shadow: 1px 1px 1px black;
  45.  
  46. /* BOX SHADOW */
  47. -moz-box-shadow: 0 1px 3px black;
  48. -webkit-box-shadow: 0 1px 3px black;
  49. box-shadow: 0 1px 3px black;
  50. }
  51.  
  52. /* WHILE HOVERED */
  53. .button:hover {
  54. background: #014464;
  55. background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
  56. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
  57. }
  58.  
  59. /* WHILE BEING CLICKED */
  60. .button:active {
  61. -moz-box-shadow: 0 2px 6px black;
  62. -webkit-box-shadow: 0 2px 6px black;
  63. }
  64.  
  65. </style>
  66. </head>
  67. <a href="#" class="button"> Home Button </a>
  68. </body>
  69. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.