Boutons CSS
Apprenez à styliser les boutons à l’aide de CSS.
Style de base des boutons
Exemple
.bouton {
couleur de fond : #4CAF50 ; /* Vert */
bordure : aucune ;
Couleur blanche;
rembourrage : 15px 32px ;
aligner le texte : centrer ;
décoration de texte : aucune ;
affichage : bloc en ligne ;
taille de police : 16 px ;
}
Essayez-le vous-même »
Couleurs des boutons
Utilisez le background-color propriété pour changer la couleur de fond d’un bouton :
Exemple
.button1 {background-color: #4CAF50;} /* Vert */
.button2 {background-color: #008CBA;} /* Bleu */
.button3 {background-color: #f44336;} /* Rouge */
.button4 {couleur de fond : #e7e7e7 ; couleur : noir;} /* Gris */
.button5 {background-color: #555555;} /* Noir */
Essayez-le vous-même »
Tailles des boutons
Utilisez le font-size propriété pour changer la taille de la police d’un bouton :
Exemple
.bouton1 {taille de police : 10 px ;}
.button2 {taille de police : 12 px ;}
.bouton3 {taille de police : 16 px ;}
.button4 {taille de police : 20px ;}
.button5 {taille de police : 24 px ;}
Essayez-le vous-même »
Utilisez le padding propriété pour changer le rembourrage d’un bouton :
Exemple
.button1 {remplissage : 10px 24px ;}
.button2 {remplissage : 12px 28px ;}
.button3 {remplissage : 14px 40px ;}
.button4 {remplissage : 32px 16px ;}
.button5 {remplissage : 16px ;}
Essayez-le vous-même »
Boutons arrondis
Utilisez le border-radius propriété pour ajouter des coins arrondis à un bouton :
Exemple
.bouton1 {border-radius : 2px ;}
.button2 {border-radius : 4px ;}
.bouton3 {border-radius : 8px ;}
.button4 {border-radius : 12px ;}
.button5 {border-radius : 50 % ;}
Essayez-le vous-même »
Bordures colorées des boutons
Utilisez le border propriété pour ajouter une bordure colorée à un bouton :
Exemple
.bouton1 {
couleur de fond : blanc ;
la couleur noire;
bordure : 2px solide #4CAF50 ; /* Vert */
}
…
Essayez-le vous-même »
Boutons flottants
Utilisez le :hover sélecteur pour changer le style d’un bouton lorsque vous passez la souris dessus.
Conseil: Utilisez le transition-duration propriété pour déterminer la vitesse de l’effet “hover”:
Exemple
.bouton {
durée de transition : 0,4 s ;
}
.bouton : survoler {
couleur de fond : #4CAF50 ; /* Vert */
Couleur blanche;
}
…
Essayez-le vous-même »
Boutons d’ombre
Utilisez le box-shadow propriété pour ajouter des ombres à un bouton :
Exemple
.bouton1 {
boîte-ombre : 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.bouton2 : survolez {
boîte-ombre : 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 désactivés
Utilisez le opacity propriété pour ajouter de la transparence à un bouton (crée un aspect “désactivé”).
Conseil: Vous pouvez également ajouter le cursor propriété avec une valeur de “non autorisé”, qui affichera un “panneau d’interdiction de stationnement” lorsque vous passerez la souris sur le bouton :
Largeur du bouton
Par défaut, la taille du bouton est déterminée par son contenu textuel (aussi large que son contenu). Utilisez le width propriété pour modifier la largeur d’un bouton :
Exemple
.button1 {largeur : 250px ;}
.button2 {largeur : 50 % ;}
.button3 {largeur : 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 :
Groupe de boutons encadrés
Utilisez le border propriété pour créer un groupe de boutons encadrés :
Groupe de boutons verticaux
Utiliser display:block au lieu de float:left pour regrouper les boutons les uns sous les autres, au lieu de côte à côte :
Bouton sur l’image
Essayez-le vous-même »
Boutons animés
#Boutons #CSS