Guest User

Untitled

a guest
Jul 23rd, 2018
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. .button
  2. {
  3. margin: 10px;
  4. text-decoration: none;
  5. font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
  6. display: inline-block;
  7. text-align: center;
  8. color: #fff;
  9.  
  10. border: 1px solid #9c9c9c; /* Fallback style */
  11. border: 1px solid rgba(0, 0, 0, 0.3);
  12.  
  13. text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  14.  
  15. box-shadow: 0 0 .05em rgba(0,0,0,0.4);
  16. -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
  17. -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
  18.  
  19. }
  20.  
  21. .button, .button span
  22. {
  23. -moz-border-radius: .3em;
  24. border-radius: .3em;
  25. }
  26.  
  27. .button span
  28. {
  29. border-top: 1px solid #fff; /* Fallback style */
  30. border-top: 1px solid rgba(255, 255, 255, 0.5);
  31. display: block;
  32. padding: 0.5em 2.5em;
  33.  
  34. /* The background pattern */
  35.  
  36. background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
  37. -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
  38. -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
  39. -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
  40. background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
  41. -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
  42. -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
  43. -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
  44.  
  45. /* Pattern settings */
  46.  
  47. -moz-background-size: 3px 3px;
  48. -webkit-background-size: 3px 3px;
  49. }
  50.  
  51. .button:hover
  52. {
  53. box-shadow: 0 0 .1em rgba(0,0,0,0.4);
  54. -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
  55. -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
  56. }
  57.  
  58. .button:active
  59. {
  60. /* When pressed, move it down 1px */
  61. position: relative;
  62. top: 1px;
  63. }
Add Comment
Please, Sign In to add comment