Style des boutons CSS survol, couleur et arrière-plan
· 1 min de lecture
Article sponsorisé
sponsored
Dans cet article, vous verrez comment styliser un bouton à l aide de CSS. Mon objectif ici est surtout de montrer comment les différentes règles et styles CSS sont appliqués et utilisés. Nous ne verro
Questions courantes
Comment styliser un bouton en CSS ?
Pour styliser un bouton en CSS, vous devez utiliser les propriétés CSS telles que la couleur de l’arrière-plan, la couleur du texte, la bordure et la taille. Vous pouvez également utiliser les pseudo-classes pour modifier l’état du bouton lors du survol, du focus ou de l’activation.
Quel est l’objectif de l’article ?
L’objectif de cet article est de montrer comment les différentes règles et styles CSS sont appliqués et utilisés pour styliser un bouton.
Pourquoi est-il important de connaître les styles CSS pour les boutons ?
Il est important de connaître les styles CSS pour les boutons car cela vous permet de personnaliser l’apparence de vos boutons et de les rendre plus attractifs pour les utilisateurs.
Dans cet article, vous verrez comment styliser un bouton à l’aide de CSS.
Mon objectif ici est surtout de montrer comment les différentes règles et styles CSS sont appliqués et utilisés. Nous ne verrons pas beaucoup d’inspiration en matière de design et nous ne discuterons pas d’idées de style.
Il s’agit plutôt d’un aperçu du fonctionnement des styles, des propriétés les plus utilisées et de la façon dont ils peuvent être combinés.
Les bases du style des boutons CSS
Avant de plonger dans les détails de la personnalisation des boutons, il est important de comprendre les bases du style des boutons CSS. Les boutons sont des éléments HTML qui peuvent être stylisés à l’aide de CSS pour les rendre plus attractifs et plus fonctionnels.
Les propriétés CSS les plus couramment utilisées pour styliser les boutons sont la couleur de l’arrière-plan, la couleur du texte, la bordure et la taille. Vous pouvez également utiliser les pseudo-classes pour modifier l’état du bouton lors du survol, du focus ou de l’activation.
Si vous souhaitez en savoir plus sur la modification de la couleur d’arrière-plan, vous pouvez consulter notre article sur le Div Background Color.
Vous verrez d’abord comment créer un bouton en HTML. Ensuite, vous apprendrez à remplacer les styles par défaut des boutons. Enfin, vous aurez un aperçu de la manière de styliser les boutons pour leurs trois états différents.
- Créer un bouton en HTML
- Modifier le style par défaut des boutons
- Modifier la couleur de l’arrière-plan
- Modifier la couleur du texte
- Modifier le style de la bordure
- Modifier la taille
Pour créer un bouton, utilisez l’
élément ```` .
Il s’agit d’une option plus accessible et sémantique que l’utilisation d’un conteneur générique créé avec l’élément “
“
qui est créé avec l’élément
index.html ci-dessous, j’ai créé la structure de base d’une page Web et ajouté un seul bouton :
Style des boutons CSS
Cliquez-moi !
Décomposons la ligne `Cliquez-moi !`:
- Vous ajoutez d’abord l’élément bouton, qui consiste en une balise ouvrante ```` et une balisefermante ``.
- L’attribut `type="button"` de labaliseouvrante ```` crée explicitement un bouton cliquable. Comme ce bouton particulier n’est pas utilisé pour soumettre un formulaire, il est utile, pour des raisons sémantiques, de l’ajouter afin de rendre le code plus clair et de ne pas déclencher d’actions indésirables.
- L’attribut `class="button"` sera utilisé pour styliser le bouton dans un fichier CSS distinct. La valeur `button` pourrait être n’importe quel autre nom de votre choix. Par exemple, vous auriez pu utiliser `class="btn"`.
- Le texte `Cliquez-moi !` est le texte visible à l’intérieur du bouton.
Tous les styles qui seront appliqués au bouton iront à l’intérieur d’un fichier spearate `style.css`.
Vous pouvez appliquer les styles au contenu HTML en reliant les deux fichiers entre eux. Pour ce faire, vous utilisez la balise `` qui a été utilisée dans `index.html`.
[Dans le fichier style.css](https://reussirsaboutiqueenligne.fr/css/principes-de-base-de-lanimation-web-comment-rendre-vos-pages-fluides/), j’ai ajouté un style qui centre uniquement le bouton au milieu de la fenêtre du navigateur.
Remarquez que la `balise class="button"` est utilisée avec le sélecteur `.button`. Il s’agit d’un moyen d’appliquer des styles directement au bouton.
`* {
box-sizing : border-box ;
}
body {
display:flex ;
justify-content : center ;
align-items : center ;
margin:50px auto ;
}
.button {
position : absolute ;
top:50
}`
Le code ci-dessus donnera le résultat suivant :
Le style par défaut des boutons varie en fonction du navigateur que vous utilisez.
Voici un exemple de l’aspect des styles natifs des boutons dans le navigateur Google Chrome.
## Comment modifier le style par défaut des boutons ?
##
### Comment modifier la couleur d’arrière-plan des boutons
### Pour modifier la couleur d’arrière-plan du bouton, utilisez la propriété CSS
`background-color` et donnez-lui la valeur d’une couleur de votre choix.
Dans le sélecteur `.button`, vous utilisez `background-color:#0a0a23 ;` pour modifier la couleur d’arrière-plan du bouton.
`.button {
position : absolute ;
top:50% ;
background-color:#0a0a23 ;
}`
### Comment modifier la couleur du texte des boutons
### La couleur par défaut du texte est le noir. Ainsi, lorsque vous ajoutez une couleur d’arrière-plan sombre, vous remarquerez que le texte a disparu.
Il faut également veiller à ce que le contraste soit suffisant entre la couleur d’arrière-plan et la couleur du texte du bouton. Cela permet de rendre le texte plus lisible et plus agréable pour les yeux.
Ensuite, utilisez la propriété
`color` pour modifier la couleur du texte :
`.button {
position : absolute ;
top:50% ;
background-color:#0a0a23 ;
couleur : #fff ;
}`
### Comment modifier le style de bordure des boutons ?
### Vous remarquez le gris autour des bords du bouton ? Il s’agit de la couleur par défaut des bordures du bouton.
Une façon de corriger cela est d’utiliser la propriété
`border-color`. Vous définissez la valeur pour qu’elle soit identique à la valeur de `background-color`. Ainsi, les bordures sont de la même couleur que l’arrière-plan du bouton.
Une autre solution consiste à supprimer entièrement la bordure du bouton en utilisant `border:none ;`.
`.button {
position : absolute ;
top:50% ;
background-color:#0a0a23 ;
couleur : #fff ;
border:none ;
}`
Ensuite, vous pouvez également arrondir les bords du bouton en utilisant la propriété `border-radius`, comme suit :
`.button {
position : absolute ;
haut:50% ;
background-color:#0a0a23 ;
couleur : #fff ;
border:none ;
border-radius:10px ;
}`
Vous pouvez également ajouter un léger effet d’ombre autour du bouton en utilisant la propriété `box-shadow`:
`position : absolute ;
haut : 50% ;
background-color:#0a0a23 ;
couleur : #fff ;
border:none ;
border-radius:10px ;
box-shadow : 0px 0px 2px 2px rgb(0,0,0) ;`
### Comment modifier la taille des boutons
### La façon de créer plus d’espace à l’intérieur des bordures du bouton est d’augmenter le
`padding` du bouton.
Ci-dessous, j’ai ajouté une valeur de 15px pour le remplissage en haut, en bas, à droite et à gauche du bouton.
J’ai également défini une hauteur et une largeur minimales, avec les propriétés `min-height` et `min-width` respectivement. Les boutons doivent être suffisamment grands pour tous les types d’appareils.
`.button {
position : absolute ;
top:50% ;
background-color:#0a0a23 ;
color : #fff ;
border:none
border-radius:10px
padding:15px ;
min-hauteur:30px
min-width : 120px ;
}`
## Comment styliser les états des boutons
## Les boutons ont trois états différents :
Il est préférable que les trois états soient stylisés différemment et ne partagent pas les mêmes styles.
Dans les sections suivantes, je vais vous expliquer brièvement la signification de chacun de ces états et ce qui les déclenche. Vous verrez également comment vous pouvez styliser le bouton pour chaque état distinct.
### Comment styliser les états `:hover`
### L’état
`:hover` est présent lorsqu’un utilisateur survole un bouton, en plaçant sa souris ou son trackpad dessus, sans le sélectionner ou cliquer dessus.
Pour modifier les styles du bouton lorsque vous le survolez, utilisez le sélecteur de pseudoclasse `:hover` CSS
.
Une modification courante à effectuer avec `:hover` consiste à changer la couleur d’arrière-plan du bouton.
Pour que le changement soit moins brutal, associez `:hover` à la propriété `transition`.
La propriété de `transition` permet de rendre la *transition* entre l’absence d’état et l’état `:hover` beaucoup plus douce.
Le changement de couleur d’arrière-plan se fera un peu plus lentement que sans la propriété de `transition`. Cela contribuera également à rendre le résultat final moins brutal pour l’utilisateur.
`.button:hover {
background-color:#002ead ;
transition : 0.7s ;
}`
Dans l’exemple ci-dessus, j’ai utilisé une valeur de code de couleur hexadécimale pour rendre la couleur d’arrière-plan plus claire lorsque je survole le bouton.
À l’aide de la propriété de `transition`, j’ai également provoqué un délai de `0,7 s` lors de la transition de l’état sans `survol` à l’état `:hover`. La transition de la couleur d’arrière-plan originale `#0a0a23` à la couleur d’arrière-plan `#002ead` est ainsi plus lente.
N’oubliez pas que la pseudoclasse `:hover` ne fonctionne pas sur les écrans des appareils mobiles et des applications mobiles. Choisissez d’utiliser les effets de survol uniquement pour les applications Web de bureau et non pour les écrans tactiles.
### Comment styliser les états `:focus`
### L’état
`:focus` prend effet pour les utilisateurs du clavier – plus précisément, il s’active lorsque vous mettez l’accent sur un bouton en appuyant sur la touche `Tab``(⇥)`.
Si vous suivez bien, lorsque vous vous concentrez sur le bouton après avoir appuyé sur la touche `Tab`, vous verrez ce qui suit :
Vous remarquez le léger contour bleu clair autour du bouton lorsqu’il a obtenu la mise au point ?
Les navigateurs ont un style par défaut pour la pseudoclasse `:focus`, à des fins d’accessibilité et de navigation au clavier. Ce n’est pas une bonne idée de supprimer complètement ce `contour`.
Vous pouvez toutefois créer des styles personnalisés pour ce contour et le rendre facilement détectable.
Pour ce faire, vous pouvez définir la couleur du contour comme étant `transparente`.
Ensuite, vous pouvez maintenir le `style du contour` en `solide`. Enfin, à l’aide de la propriété `box-shadow`, vous pouvez ajouter une couleur de votre choix lorsque l’élément est mis en évidence :
`.button:focus {
outline-color : transparent ;
outline-style:solid ;
box-shadow : 0 0 0 4px #5a01a7 ;
}`
Vous pouvez également associer ces styles à la propriété de `transition`, en fonction de l’effet que vous souhaitez obtenir :
`.button:focus {
outline-color : transparent ;
outline-style:solid ;
box-shadow : 0 0 0 4px #5a01a7 ;
transition : 0.7s ;
}`
### Comment créer un style pour l’état `:active`
### L’état
`:active` est *activé* lorsque vous cliquez sur le bouton, soit en cliquant sur la souris de l’ordinateur, soit en appuyant sur le pavé tactile de l’ordinateur portable.
Cela dit, regardez ce qui se passe lorsque je clique sur le bouton après avoir appliqué et conservé les styles pour les états `:hover` et `:focus`:
Les styles de l’état `:hover` sont appliqués avant le clic lorsque je survole le bouton.
Les styles de l’état `:focus` sont également appliqués, car lorsqu’un bouton est cliqué, il obtient également l’état `:focus` en plus de l’état `:active`.
Toutefois, n’oubliez pas qu’il *ne* s’agit *pas* de la même chose.
l’état`:focus` correspond à l’état d’un élément sur lequel on se concentre, tandis que l’état `:active` correspond à l’état d’un élément sur lequel l’utilisateur `clique` en le maintenant enfoncé.
Pour modifier le style lorsqu’un utilisateur clique sur un bouton, appliquez des styles au pseudo-sélecteur CSS `:active`.
Dans ce cas, j’ai modifié la couleur d’arrière-plan du bouton lorsque l’utilisateur clique dessus
`.button:active {
background-color : #ffbf00 ;
}`
## Conclusion
Et voilà, vous y êtes ! Vous connaissez maintenant les bases du style d’un bouton avec CSS.
Nous avons vu comment modifier la couleur d’arrière-plan et la couleur du texte des boutons, ainsi que le style des boutons pour leurs différents états.
<div class="legacy-sponsored" data-original-paragraph>
<p>Notez que la certification ci-dessus est toujours en version bêta. Si vous souhaitez obtenir la dernière version stable, <a href="https://www.freecodecamp.org/learn/responsive-web-design">cliquez ici</a>.</p>
</div>
<div class="legacy-sponsored" data-original-paragraph>
<p>Pour en savoir plus sur la conception Web, consultez la <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">certification Responsive Web Design</a> de freeCodeCamp. Dans les leçons interactives, vous apprendrez le <a href="https://reussirsaboutiqueenligne.fr/css/html-center-image-css-align-img-center-exemple/" data-wpil-monitor-id="1387">HTML et le CSS</a> en réalisant 15 projets pratiques et 5 projets de certification.</p>
</div>
Merci de votre lecture et bon codage !
## FAQ
### Comment créer un bouton en HTML ?
Pour créer un bouton en HTML, vous devez utiliser l'élément <button> ou <input type="button">.
### Quelle est la différence entre les pseudo-classes :hover, :focus et :active ?
Les pseudo-classes :hover, :focus et :active sont utilisées pour modifier l'état du bouton lors du survol, du focus ou de l'activation. La pseudo-classe :hover est utilisée pour modifier l'état du bouton lors du survol, la pseudo-classe :focus est utilisée pour modifier l'état du bouton lors du focus et la pseudo-classe :active est utilisée pour modifier l'état du bouton lors de l'activation.
### Pourquoi est-il important de tester les boutons sur différents navigateurs ?
Il est important de tester les boutons sur différents navigateurs pour s'assurer qu'ils fonctionnent correctement et qu'ils sont compatibles avec les différents navigateurs.
### Comment puedo personnaliser l'apparence des boutons ?
Vous pouvez personnaliser l'apparence des boutons en utilisant les propriétés CSS telles que la couleur de l'arrière-plan, la couleur du texte, la bordure et la taille. Vous pouvez également utiliser les pseudo-classes pour modifier l'état du bouton lors du survol, du focus ou de l'activation.
### À lire aussi sur le site
- [Div Background Color – Comment modifier la couleur d’arrière-plan en CSS](https://reussirsaboutiqueenligne.fr/css/div-background-color-comment-modifier-la-couleur-darriere-plan-en-css/)
- [Adobe Firefly : la magie de reproduire et copier votre style visuel en un clic](https://reussirsaboutiqueenligne.fr/astuces/adobe-firefly-la-magie-de-reproduire-et-copier-votre-style-visuel-en-un-clic/)
- [Le Noël magique du Roi Lion : quand les ordinateurs ont planté et les enfants ont versé des larmes d’émotion](https://reussirsaboutiqueenligne.fr/astuces/le-noel-magique-du-roi-lion-quand-les-ordinateurs-ont-plante-et-les-enfants-ont-verse-des-larmes-demotion/)Questions fréquentes
Pourquoi style des boutons css survol, couleur et arrière-plan est-il important ?
Dans cet article, vous verrez comment styliser un bouton à l aide de CSS. Mon objectif ici est surtout de montrer comment les différentes règles et styles CSS sont appliqués et utilisés. Nous ne verro
Comment en savoir plus ?
Consultez les sections de cet article pour approfondir, et explorez les liens internes vers les sujets connexes.
À lire aussi
20 mars 2022
Div Background Color Comment modifier la couleur d arrière-plan en CSS
Si vous travaillez sur un projet de développement Web, la définition d une belle couleur d arrière-plan peut donner au site Web un aspect plus attrayant. Pour définir une couleur d arrière-plan pour u
21 mars 2026
Adobe Firefly : la magie de reproduire et copier votre style visuel en un clic
En 2026, l’univers de la création digitale connaît une révolution grâce à l’émergence d’Adobe Firefly, un outil d’intelligence artificielle qui change la façon dont les designers, artistes et marques
29 avr. 2022
Plan du site
18 avr. 2026
OpenAI dévoile Codex : une mise à jour révolutionnaire en informatique, traitement d’image…
En 2026, OpenAI frappe de nouveau un grand coup dans le domaine de l’intelligence artificielle avec le lancement de la mise à jour révolutionnaire de son agent Codex. Conçue pour repousser les limites