Advanced Search

Chunky CSS3 Button

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .submit {
  2. 	width: 120px;
  3. 	height: 32px;
  4. 	padding: 0 0 2px;
  5. 	font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
  6. 	outline: none;
  7. 	position: relative;
  8. 	cursor: pointer;
  9. 	border-radius: 3px;
  10. 	color: #5D7731;
  11. 	text-shadow: 1px 1px #D0E5A4;
  12. 	border: 1px solid #89A94D;
  13. 	border-top: 1px solid #AAD063;
  14. 	border-bottom: 1px solid #6D883B;
  15. 	box-shadow:
  16. 		inset 0 1px #E0EEB6,
  17. 		inset 1px 0 #C6E08D,
  18. 		inset -1px 0 #C6E08D,
  19. 		inset 0 -1px #B4D579,
  20. 		0 2px #799545,
  21. 		0 3px #6D883B,
  22. 		0 4px 2px rgba(0,0,0,0.4)
  23. 	;
  24. 	background: -moz-linear-gradient(top,  #cae285 0%, #a3cd5a 100%); /* FF3.6+ */
  25. 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae285), color-stop(100%,#a3cd5a)); /* Chrome,Safari4+ */
  26. 	background: -webkit-linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* Chrome10+,Safari5.1+ */
  27. 	background: -o-linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* Opera 11.10+ */
  28. 	background: -ms-linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* IE10+ */
  29. 	background: linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* W3C */
  30. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae285', endColorstr='#a3cd5a',GradientType=0 ); /* IE6-9 */
  31. 	background-color: #B6D76F;
  32. }
  33. .submit::-moz-focus-inner{border:0}
  34. .submit:hover {
  35. 	border-top: 1px solid #98B85B;
  36. 	box-shadow:
  37. 		inset 0 1px #CCE3A1,
  38. 		inset 1px 0 #C6E08D,
  39. 		inset -1px 0 #C6E08D,
  40. 		inset 0 -1px #C7E18E,
  41. 		0 2px #799545,
  42. 		0 3px #6D883B,
  43. 		0 4px 2px rgba(0,0,0,0.4)
  44. 	;
  45. 	background: -moz-linear-gradient(top,  #abd164 0%, #b9d972 100%); /* FF3.6+ */
  46. 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abd164), color-stop(100%,#b9d972)); /* Chrome,Safari4+ */
  47. 	background: -webkit-linear-gradient(top,  #abd164 0%,#b9d972 100%); /* Chrome10+,Safari5.1+ */
  48. 	background: -o-linear-gradient(top,  #abd164 0%,#b9d972 100%); /* Opera 11.10+ */
  49. 	background: -ms-linear-gradient(top,  #abd164 0%,#b9d972 100%); /* IE10+ */
  50. 	background: linear-gradient(top,  #abd164 0%,#b9d972 100%); /* W3C */
  51. 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd164', endColorstr='#b9d972',GradientType=0 ); /* IE6-9 */
  52. 	background-color: #B6D76F;
  53. }
  54. .submit:active {
  55. 	top: 3px;
  56. 	border: 1px solid #88A84E;
  57. 	border-top: 1px solid #6E883F;
  58. 	border-bottom: 1px solid #95B855;
  59. 	background: #A7CF5F;
  60. 	box-shadow: inset 0 1px 2px #779441;
  61. }

URL: http://dimox.name/examples/beautiful-3d-buttons-using-css3/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.