Style des boutons en CSS
Page 16 | Écouter en audio
Style des boutons CSS
Les boutons sont des éléments largement utilisés dans les interfaces utilisateur, que ce soit dans des formulaires, des menus ou même des appels à des actions spécifiques. Ils constituent l'une des formes d'interaction les plus courantes entre l'utilisateur et l'application. Par conséquent, il est important qu'ils soient bien stylisés afin qu'ils attirent l'attention de l'utilisateur et transmettent le bon message. Il existe plusieurs façons de styliser les boutons dans CSS, du simple changement de la couleur d'arrière-plan à l'utilisation d'effets de transition. Voyons quelques-unes des principales techniques utilisées :Couleurs et bordures
La façon la plus simple de styliser un bouton consiste à définir des couleurs et des bordures. Vous pouvez définir la couleur d'arrière-plan, la couleur du texte, la couleur de la bordure, la taille de la bordure et d'autres propriétés. Par exemple: ``` CSS bouton { couleur de fond : #007bff ; couleur : #fff ; bordure : 1px solide #007bff ; rayon de bordure : 4 px ; rembourrage : 10px 20px ; taille de police : 16 px ; } ``` Dans cet exemple, nous définissons la couleur d'arrière-plan du bouton sur bleu (#007bff), la couleur du texte sur blanc (#fff), une bordure solide de 1 pixel sur bleu et un rayon de bordure de 4 pixels. Nous définissons également un rembourrage intérieur de 10 pixels verticalement et 20 pixels horizontalement, ainsi qu'une taille de police de 16 pixels.Effets de transition
Une autre façon de styliser les boutons consiste à utiliser des effets de transition. Ces effets peuvent être appliqués lorsque l'utilisateur survole le bouton ou lorsque le bouton est cliqué. Par exemple: ``` CSS bouton : survoler { couleur de fond : #0056b3 ; couleur de bordure : #0056b3 ; couleur : #fff ; transition : toutes les 0,3 s d'aisance ; } bouton:actif { couleur de fond : #003b80 ; couleur de bordure : #003b80 ; couleur : #fff ; transition : toutes les 0,3 s d'aisance ; } ``` Dans cet exemple, nous définissons que lorsque l'utilisateur survole le bouton, la couleur d'arrière-plan et la couleur de la bordure passeront à une nuance de bleu plus foncée (#0056b3) et la couleur du texte passera au blanc (#fff). Lorsque le bouton est cliqué, la couleur d'arrière-plan et la couleur de la bordure reviendront à une nuance de bleu encore plus foncée (#003b80) et la couleur du texte restera blanche. Nous définissons également que ces changements doivent se produire dans une transition de 0,3 seconde, en utilisant la fonction de facilité pour rendre la transition plus fluide.Dégradés
Une autre technique souvent utilisée dans le style des boutons est l'utilisation de dégradés. Les dégradés sont un moyen de créer une transition en douceur entre deux ou plusieurs couleurs. Par exemple: ``` CSS bouton { arrière-plan : dégradé linéaire (vers le bas, #007bff, #0056b3) ; couleur : #fff ; bordure : 1px solide #007bff ; rayon de bordure : 4 px ; rembourrage : 10px 20px ; taille de police : 16 px ; } ``` Dans cet exemple, nous définissons un dégradé linéaire qui va du bleu clair (#007bff) à une nuance de bleu plus foncée (#0056b3), dans le sens du bas vers le bas. Nous définissons également les autres propriétés de base du bouton, telles que la couleur du texte, la bordure et le rayon de la bordure.Icônes
Enfin, une autre façon de styliser les boutons consiste à ajouter des icônes. Des icônes peuvent être ajoutées à l'aide de polices spéciales (telles que Font Awesome) ou à l'aide d'images. Par exemple: ```htmlRépondez maintenant à l’exercice sur le contenu :
_Quelle est l'une des manières les plus basiques de styliser un bouton en CSS ?
Tu as raison! Félicitations, passez maintenant à la page suivante
Vous avez raté! Essayer à nouveau.
Page suivante de lebook gratuit :
17Style d'image en CSS
3 minutes
Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !
