Advanced Search

CSS3 Button with hover over, shadowing, and gradient

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.