button.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .btn {
  2. background: #2b3444;
  3. border: 1px solid #2b3444;
  4. color: #e5e7eb;
  5. font-size: 14px;
  6. padding: 6px 12px;
  7. border-radius: 6px;
  8. cursor: pointer;
  9. user-select: none;
  10. display: inline-flex;
  11. align-items: center;
  12. gap: 6px;
  13. transition: all 0.18s ease;
  14. }
  15. .btn:hover {
  16. background: #3a475c;
  17. border-color: #3a475c;
  18. }
  19. .btn:active {
  20. transform: translateY(1px);
  21. background: #1f2937;
  22. border-color: #1f2937;
  23. }
  24. .btn:disabled {
  25. opacity: 0.4;
  26. cursor: not-allowed;
  27. transform: none;
  28. }
  29. .btn-blue {
  30. background: #2563eb;
  31. border: 1px solid #2563eb;
  32. color: white;
  33. }
  34. .btn-blue:hover {
  35. background: #1d4ed8;
  36. border-color: #1d4ed8;
  37. }
  38. .btn-blue:active {
  39. transform: translateY(1px);
  40. background: #1e40af;
  41. }
  42. .btn-red {
  43. background: #ef4444;
  44. border: 1px solid #ef4444;
  45. color: white;
  46. }
  47. .btn-red:hover {
  48. background: #dc2626;
  49. border-color: #dc2626;
  50. }
  51. .btn-red:active {
  52. transform: translateY(1px);
  53. background: #b91c1c;
  54. }