Pure CSS button with rounded corners, gradient and shadow


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



Copy this code and paste it in your HTML
  1. .orange {
  2. width:100px;
  3. height: auto;
  4. color: #fef4e9;
  5. padding: 5px;
  6. border: solid 1px #da7c0c;
  7. background: #f78d1d;
  8. background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  9. background: -moz-linear-gradient(top, #faa51a, #f47a20);
  10. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
  11. display: inline-block;
  12. outline: none;
  13. cursor: pointer;
  14. text-align: center;
  15. text-decoration: none;
  16. font: 14px/100% Arial, Helvetica, sans-serif;
  17. padding: ;
  18. text-shadow: 0 1px 1px rgba(0,0,0,.3);
  19. -webkit-border-radius: .5em;
  20. -moz-border-radius: .5em;
  21. border-radius: .5em;
  22.  
  23. }
  24. .orange p {
  25. font-size: 1em;
  26. font-family: Arial, Helvetica, sans-serif;
  27. }
  28. .orange:hover {
  29. background: #f47c20;
  30. background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  31. background: -moz-linear-gradient(top, #f88e11, #f06015);
  32. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
  33. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  34. -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  35. box-shadow: 0 1px 2px rgba(0,0,0,.2);
  36. }
  37. .orange:active {
  38. color: #fcd3a5;
  39. background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  40. background: -moz-linear-gradient(top, #f47a20, #faa51a);
  41. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
  42. }

URL: http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.