buttons.css 1.1 KB

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