Comment créer : Groupe de boutons verticaux

Apprenez à créer un groupe de boutons verticaux avec CSS.

Groupe de boutons verticaux

Grouper une série de boutons dans un groupe de boutons verticaux :

Essayer vous-même

Comment créer un groupe de boutons verticaux

Première étape - Ajoutez HTML :

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

Deuxième étape - Ajoutez CSS :

.btn-group button {
  background-color: #04AA6D; /* Fond vert */
  border: 1px solid green; /* Bordure verte */
  color: white; /* Texte en blanc */
  padding: 10px 24px; /* Un peu de marge interne */
  cursor: pointer; /* Pointeur de souris / icône de main */
  width: 50%; /* Définissez la largeur si nécessaire */
  display: block; /* Permet de superposer les boutons */
}
.btn-group button:not(:last-child) {
  border-bottom: none; /* Empêche les bords doubles */
}
/* Ajoutez la couleur de fond au curseur de souris */
.btn-group button:hover {
  background-color: #3e8e41;
}

Essayer vous-même

Pages connexes

Tutoriel :Bouton CSS