Chunky CSS3 Button


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

not mine.


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.