Stylisation CSS des Boutons
Stylisation CSS des Boutons
Avec CSS, différents boutons HTML peuvent être stylisés de plusieurs manières.
Les propriétés CSS les plus courantes pour styliser les boutons sont :
-
background-color- définit la couleur de fond d'un bouton -
color- définit la couleur du texte d'un bouton -
border- définit la bordure d'un bouton -
padding- définit l'espace entre le texte et la bordure d'un bouton -
border-radius- ajoute des coins arrondis à un bouton -
box-shadow- ajoute des ombres à un bouton -
text-align- centre le texte d'un bouton -
font-size- définit la taille de la police du texte sur un bouton -
text-decoration- supprime le soulignement pour les éléments <a> utilisés comme boutons -
cursor- change le curseur de la souris lorsque vous survolez le bouton
Les boutons sont généralement créés avec l'élément HTML <button> , l'élément <input type="button"> , ou un élément <a> stylisé comme un bouton.
Stylisation de Base des Boutons CSS
Exemple
Une stylisation de base pour différents éléments HTML :
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
} Couleurs des Boutons CSS
La propriété CSS background-color est utilisée pour définir la couleur de fond d'un bouton.
La propriété CSS color est utilisée pour définir la couleur du texte d'un bouton.
Exemple
Boutons avec différentes couleurs :
.button1 {background-color: #04AA6D;} /* Vert */
.button2 {background-color: #008CBA;} /* Bleu */
.button3 {background-color: #f44336;} /* Rouge */
.button4 {background-color: #e7e7e7; color: black;} /* Gris */
.button5 {background-color: #555555;} /* Noir */ Tailles des Boutons CSS
La propriété CSS font-size est utilisée pour définir la taille de la police pour le texte sur un bouton :
Exemple
Boutons avec différentes tailles de police :
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;} La propriété CSS padding est utilisée pour définir l'espace entre le texte et la bordure d'un bouton :
Exemple
Boutons avec différents rembourrages :
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;} Boutons Arrondis CSS
La propriété CSS border-radius est utilisée pour ajouter des coins arrondis à un bouton :
Exemple
Boutons avec différents coins arrondis :
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;} Bordures des Boutons CSS
La propriété CSS border est utilisée pour définir la bordure d'un bouton :
Exemple
Boutons avec différentes bordures :
.button1 {border: 2px solid #04AA6D;}
.button2 {border: 2px dotted #008CBA;}
.button3 {border: 2px dashed #f44336;}
.button4 {border: 1px solid #e7e7e7;}
.button5 {border: 1px solid #555555;} Boutons CSS Survolables
La pseudo-classe CSS :hover est utilisée pour changer le style d'un bouton lorsque vous le survolez.
Astuce : Utilisez la propriété CSS transition-duration pour déterminer la vitesse de l'effet "survol" :
Exemple
Boutons avec différents effets de survol :
.button1:hover {background-color: #04AA6D;color: white;}
.button2:hover {background-color: #008CBA;color: white;}
.button3:hover {background-color: #f44336;color: white;}
.button4:hover {background-color: #e7e7e7;color: black}
.button5:hover {background-color: #555555;color: white;} Boutons CSS Avec Ombre
La propriété CSS box-shadow est utilisée pour ajouter une ombre à un bouton :
Exemple
Boutons avec ombres :
.button1 {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)}
.button2:hover {box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)} Bouton CSS Désactivé
La propriété CSS opacity peut être utilisée pour ajouter de la transparence à un bouton (crée un aspect "désactivé").
Astuce : Vous pouvez également ajouter la propriété cursor avec une valeur de "not-allowed", ce qui affichera un "signe de stationnement interdit" lorsque vous survolez le bouton :
Exemple
Un bouton désactivé :
.disabledbtn {
opacity: 0.6;
cursor: not-allowed;
} Largeur des Boutons CSS
Par défaut, la taille d'un bouton est déterminée par son contenu textuel.
La propriété CSS width peut être utilisée pour définir une largeur spécifique pour un bouton.
Astuce : Utilisez des pixels pour définir une largeur fixe, ou un pourcentage pour une largeur responsive (par exemple, 50 % de son élément parent).
Exemple
Boutons avec différentes largeurs :
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;} Groupe de Boutons Horizontaux CSS
Pour créer un groupe de boutons, enveloppez les boutons dans un élément <div>, et ajoutez display: flex; à l'élément <div>. Ajoutez également flex-wrap: wrap; , pour permettre aux boutons de se répartir sur une nouvelle ligne sur les petits écrans :
Exemple
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
} Groupe de Boutons Bordés CSS
Utilisez la propriété border pour créer un groupe de boutons bordés :
Exemple
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
.btn-group .button:not(:last-child) {
border-right: none; /* Empêcher les bordures doubles */
} Groupe de Boutons Verticaux CSS
Pour créer un groupe de boutons verticaux, enveloppez les boutons dans un élément <div>, et ajoutez display: flex; à l'élément <div>. Ajoutez également flex-direction: column; , pour que les boutons soient affichés de manière verticale :
Exemple
.btn-group {
display: flex;
flex-direction: column;
} Bouton sur Image
Boutons CSS Animés
Exemple
Ajoutez une flèche au survol :
Exemple
Ajoutez un effet "pressé" au clic :
Exemple
Fondu au survol :
Exemple
Ajoutez un effet "ripple" au clic :