button.css 933 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. :root {
  2. --button-box-shadow: inset -1px -1px #777,
  3. inset -2px -2px #aaa,
  4. inset 1px 1px #ddd,
  5. inset 2px 2px #fff;
  6. --button-default: 0 0 0 1px #aaa,
  7. 0 0 0 2px #ddd,
  8. 0 0 0 3px #000;
  9. }
  10. button {
  11. font-size: 12px;
  12. font-family: 'Charcoal';
  13. height: 20px;
  14. background: #dedede;
  15. /*margin-bottom: 7px;
  16. margin-left: 14px;*/
  17. border-radius: 3px;
  18. border: 1px solid #000;
  19. box-shadow: var(--button-box-shadow);
  20. min-width: 58px;
  21. }
  22. button.default {
  23. box-shadow: var(--button-box-shadow), var(--button-default);
  24. }
  25. button:active {
  26. color: #fff;
  27. background: #666;
  28. }
  29. button:not(.default):active {
  30. box-shadow: inset -1px -1px #888,
  31. inset -2px -2px #777,
  32. inset 1px 1px #444,
  33. inset 2px 2px #555;
  34. }
  35. button.default:active {
  36. box-shadow: var(--button-default),
  37. inset -1px -1px #888,
  38. inset -2px -2px #777,
  39. inset 1px 1px #444,
  40. inset 2px 2px #555;
  41. }