button.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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: 4px;
  9. cursor: pointer;
  10. user-select: none;
  11. display: inline-flex;
  12. align-items: center;
  13. transition: background 0.15s ease, border-color 0.15s ease;
  14. justify-content: center;
  15. flex-shrink:0;
  16. white-space:nowrap;
  17. }
  18. .btn:hover {
  19. background: #3a475c;
  20. border-color: #3a475c;
  21. }
  22. .btn:active {
  23. background: #1f2937;
  24. border-color: #1f2937;
  25. }
  26. .btn:focus {
  27. outline: none;
  28. border-color: #3b82f6;
  29. }
  30. .btn:disabled {
  31. opacity: 0.4;
  32. cursor: not-allowed;
  33. }
  34. .btn-blue {
  35. background: #2563eb;
  36. border-color: #2563eb;
  37. color: white;
  38. }
  39. .btn-blue:hover {
  40. background: #1d4ed8;
  41. border-color: #1d4ed8;
  42. }
  43. .btn-blue:active {
  44. background: #1e40af;
  45. border-color: #1e40af;
  46. }
  47. .btn-red {
  48. background: #ef4444;
  49. border-color: #ef4444;
  50. color: white;
  51. }
  52. .btn-red:hover {
  53. background: #dc2626;
  54. border-color: #dc2626;
  55. }
  56. .btn-red:active {
  57. background: #b91c1c;
  58. border-color: #b91c1c;
  59. }
  60. .login-box .btn {
  61. width: 100%;
  62. height: 45px;
  63. margin-top: 10px;
  64. justify-content: center;
  65. }