blogben/assets/styles/buttons.css

/* Style de base pour tous les boutons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  }

  .btn::after {
    content: ''; /* Pas de contenu textuel */
    position: absolute;
    left: 0;
    bottom: 0px; /* Légèrement sous le texte */
    width: 0;
    height: 0px;
    background-color: #ffffff; /* Couleur de la ligne */
  }

  .btn:hover {
    color: white;
  }

  .btn:active {
    color: white;
  }
  
  /* Bouton vert (succès) */
  .btn-green {
    background-color: #28a745; /* Vert */
  }
  
  .btn-green:hover {
    background-color: #218838; /* Vert plus foncé au survol */
  }
  
  /* Bouton bleu (info ou action) */
  .btn-blue {
    background-color: #007bff; /* Bleu */
  }
  
  .btn-blue:hover {
    background-color: #0069d9; /* Bleu plus foncé au survol */
  }
  
  /* Bouton rouge (danger ou alerte) */
  .btn-red {
    background-color: #dc3545; /* Rouge */
  }
  
  .btn-red:hover {
    background-color: #c82333; /* Rouge plus foncé au survol */
  }
  
  /* Bouton gris  */
  .btn-gray {
    background-color: #8f8f8f; /* Gris */
  }
  
  .btn-gray:hover {
    background-color: #494949; /* Gris plus foncé */
  }