button.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .btn {
  2. background: #2b3444;
  3. border: 1px solid #2b3444;
  4. color: #e5e7eb;
  5. font-size: 14px;
  6. padding: 0 12px;
  7. height: 35px;
  8. border-radius: 6px;
  9. cursor: pointer;
  10. user-select: none;
  11. display: inline-flex;
  12. align-items: center;
  13. transition:
  14. background 0.15s ease,
  15. border-color 0.15s ease;
  16. justify-content: center;
  17. flex-shrink: 0;
  18. white-space: nowrap;
  19. }
  20. .btn:hover {
  21. background: #3a475c;
  22. border-color: #3a475c;
  23. }
  24. .btn:active {
  25. background: #1f2937;
  26. border-color: #1f2937;
  27. }
  28. .btn:focus {
  29. outline: none;
  30. border-color: #3b82f6;
  31. }
  32. /* 键盘导航聚焦环 (鼠标点击不触发, 老浏览器忽略) */
  33. .btn:focus-visible {
  34. outline: 2px solid #60a5fa;
  35. outline-offset: 2px;
  36. }
  37. .btn:disabled {
  38. opacity: 0.4;
  39. cursor: not-allowed;
  40. }
  41. .btn-blue {
  42. background: #2563eb;
  43. border-color: #2563eb;
  44. color: white;
  45. }
  46. .btn-blue:hover {
  47. background: #1d4ed8;
  48. border-color: #1d4ed8;
  49. }
  50. .btn-blue:active {
  51. background: #1e40af;
  52. border-color: #1e40af;
  53. }
  54. .btn-red {
  55. background: #ef4444;
  56. border-color: #ef4444;
  57. color: white;
  58. }
  59. .btn-red:hover {
  60. background: #dc2626;
  61. border-color: #dc2626;
  62. }
  63. .btn-red:active {
  64. background: #b91c1c;
  65. border-color: #b91c1c;
  66. }
  67. .login-box .btn {
  68. width: 100%;
  69. height: 45px;
  70. margin-top: 10px;
  71. justify-content: center;
  72. }