Apprenez comment le style des boutons en utilisant le CSS.
Bouton Styling Basic
Exemple
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
} Essayez - le vous - même » Bouton Couleurs
Utilisez le background-color propriété pour modifier la couleur d'un bouton de fond:
Exemple
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */ Essayez - le vous - même » Tailles des boutons
Utilisez la font-size de font-size de propriété pour modifier la taille d'un bouton:
Exemple
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;} Essayez - le vous - même » Boutons arrondis
Utilisez le border-radius propriété pour ajouter des coins arrondis à un bouton:
Exemple
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;} Essayez - le vous - même » Colored Borders Button
Utilisez la border propriété pour ajouter une bordure de couleur à un bouton:
Exemple
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
... Essayez - le vous - même » Boutons Hoverable
Utilisez le :hover sélecteur pour changer le style d'un bouton lorsque vous déplacez la souris dessus.
Astuce: Utilisez la transition-duration propriété pour déterminer la vitesse de l'effet "hover":
Exemple
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
... Essayez - le vous - même » Boutons de l'ombre
le Utilisez le box-shadow propriété pour ajouter des ombres à un bouton:
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);
} Essayez - le vous - même » Boutons handicapés
Utilisez l' opacity propriété pour ajouter de la transparence à un bouton (crée un look "désactivé").
Astuce: Vous pouvez également ajouter le cursor propriété avec une valeur de "non-autorisée", qui permet d' afficher un "aucun signe de stationnement" quand vous souris sur le bouton:
Bouton Largeur
Par défaut, la taille du bouton est déterminé par son contenu textuel (aussi large que son contenu). Utilisez la width propriété pour modifier la largeur d'un bouton:
Exemple
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;} Essayez - le vous - même » Groupes de boutons
Supprimer les marges et ajouter float:left à chaque bouton pour créer un groupe de boutons:
Groupes de boutons Bordée
Utilisez la border propriété pour créer un groupe de boutons à bordure: