Comment créer : groupe de boutons

Apprendre à créer un « groupe de boutons » avec CSS.

Groupe de boutons horizontal

Dans le groupe de boutons, alignez une série de boutons en une ligne :

Essayez-le vous-même

Comment créer un groupe de boutons

Première étape - Ajouter HTML :

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

Deuxième étape - Ajouter CSS :

.btn-group button {
  background-color: #04AA6D; /* Fond vert */
  border: 1px solid green; /* Bord vert */
  color: white; /* Texte en blanc */
  padding: 10px 24px; /* Certaines marges internes */
  cursor: pointer; /* Pointeur de souris/symbole de main */
  float: left; /* Flottants en parallèle des boutons */
}
.btn-group button:not(:last-child) {
  border-right: none; /* Empêcher les bords doubles */
}
/* Nettoyer les flottants (hack clearfix) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}
/* Ajouter une couleur de fond au survol de la souris */
.btn-group button:hover {
  background-color: #3e8e41;
}

Essayez-le vous-même

Groupe de boutons centrés/plein écran :

<!-- Trois boutons par groupe -->
<div class="btn-group" style="width:100%">
  <button style="width:33.3%">Apple</button>
  <button style="width:33.3%">Samsung</button>
  <button style="width:33.3%">Sony</button>
</div>
<!-- Quatre boutons par groupe -->
<div class="btn-group" style="width:100%">
  <button style="width:25%">Apple</button>
  <button style="width:25%">Samsung</button>
  <button style="width:25%">Sony</button>
  <button style="width:25%">HTC</button>
</div>

Essayez-le vous-même

Pages associées

Tutoriel :Bouton CSS