Boutons CSS

Apprendre à utiliser CSS pour définir le style des boutons.

Style de bouton de base

Exemple

.button {
  background-color: #4CAF50; /* Vert */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Essayer vous-même

Couleur des boutons

Utilisez background-color Modifier la couleur de fond des boutons :

Exemple

.button1 {background-color: #4CAF50;} /* Vert */
.button2 {background-color: #008CBA;} /* Bleu */
.button3 {background-color: #f44336;} /* Rouge */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gris */ 
.button5 {background-color: #555555;} /* Noir */

Essayer vous-même

Taille des boutons

Utilisez font-size Modifier la taille de la police des boutons :

Exemple

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Essayer vous-même

Utilisez padding Modifier l'intérieur des boutons :

Exemple

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Essayer vous-même

Bouton arrondi

Utilisez border-radius Ajouter un arrondi aux boutons :

Exemple

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Essayer vous-même

Bordure colorée du bouton

Utilisez border Propriété pour ajouter une bordure colorée aux boutons :

Exemple

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Vert */
}
...

Essayer vous-même

Bouton flottant


Lorsque le curseur de la souris est au-dessus du bouton, utilisez :hover Le sélecteur peut modifier le style des boutons.

Avis :Utilisez transition-duration Propriété pour déterminer la vitesse de l'effet "survol" :

Exemple

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Vert */
  color: white;
}
...

Essayer vous-même

Bouton à l'ombre

Utilisez box-shadow Propriété pour ajouter de l'ombre aux boutons :

Exemple

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Essayer vous-même

Bouton désactivé

Utilisez opacity Propriété pour ajouter une transparence aux boutons (créer un aspect "désactivé").

Avis :Vous pouvez également ajouter une propriété avec la valeur "not-allowed" : cursor Propriété, lorsque vous placez le curseur de la souris sur le bouton, cette propriété affiche "signe d'interdiction de stationnement" (signe d'interdiction de stationnement) :

Exemple

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Essayer vous-même

Largeur du bouton


Par défaut, la taille des boutons dépend du contenu de leur texte (de la même largeur que le contenu). Utilisez width Propriétés pour modifier la largeur des boutons :

Exemple

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Essayer vous-même

Grouper les boutons

　

Supprimer les marges extérieures et ajouter float:leftpour créer un groupe de boutons :

Exemple

.button {
  float: left;
}

Essayer vous-même

Groupe de boutons borgnés

　

Utiliser border Propriété pour créer un groupe de boutons borgnés :

Exemple

.button {
  float: left;
  border: 1px solid green;
}

Essayer vous-même

Groupe de boutons verticaux

Utiliser display:block Remplacer float:left Grouper les boutons verticalement plutôt que parallèlement :

Exemple

.button {
  display: block;
}

Essayer vous-même

Bouton sur une image

Coffee

Essayer vous-même

Bouton animé

Exemple 1

Ajouter une flèche à l'hover de la souris :

Essayer vous-même

Exemple 2

Ajouter un effet de touche enfoncée au clic :

Essayer vous-même

Exemple 3

Fondu à l'hover :

Essayer vous-même

Exemple 4

Ajouter un effet de vague au clic :

Essayer vous-même