button.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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:focus {
  25. outline: none;
  26. box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  27. }
  28. .btn:disabled {
  29. opacity: 0.4;
  30. cursor: not-allowed;
  31. }
  32. .btn-blue {
  33. background: #2563eb;
  34. border-color: #2563eb;
  35. color: white;
  36. }
  37. .btn-blue:hover {
  38. background: #1d4ed8;
  39. border-color: #1d4ed8;
  40. }
  41. .btn-blue:active {
  42. background: #1e40af;
  43. border-color: #1e40af;
  44. }
  45. .btn-red {
  46. background: #ef4444;
  47. border-color: #ef4444;
  48. color: white;
  49. }
  50. .btn-red:hover {
  51. background: #dc2626;
  52. border-color: #dc2626;
  53. }
  54. .btn-red:active {
  55. background: #b91c1c;
  56. border-color: #b91c1c;
  57. }