buttons.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /* Style de base pour tous les boutons */
  2. .btn {
  3. display: inline-block;
  4. padding: 10px 20px;
  5. font-size: 16px;
  6. font-weight: bold;
  7. text-align: center;
  8. text-decoration: none;
  9. border-radius: 5px;
  10. border: none;
  11. color: #fff;
  12. cursor: pointer;
  13. transition: background-color 0.3s ease-in-out;
  14. }
  15. /* Bouton vert (succès) */
  16. .btn-green {
  17. background-color: #28a745; /* Vert */
  18. }
  19. .btn-green:hover {
  20. background-color: #218838; /* Vert plus foncé au survol */
  21. }
  22. /* Bouton bleu (info ou action) */
  23. .btn-blue {
  24. background-color: #007bff; /* Bleu */
  25. }
  26. .btn-blue:hover {
  27. background-color: #0069d9; /* Bleu plus foncé au survol */
  28. }
  29. /* Bouton rouge (danger ou alerte) */
  30. .btn-red {
  31. background-color: #dc3545; /* Rouge */
  32. }
  33. .btn-red:hover {
  34. background-color: #c82333; /* Rouge plus foncé au survol */
  35. }
  36. /* Bouton gris */
  37. .btn-gray {
  38. background-color: #8f8f8f; /* Gris */
  39. }
  40. .btn-gray:hover {
  41. background-color: #494949; /* Gris plus foncé */
  42. }