Style des boutons CSS – survol, couleur et arrière-plan

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.

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.

  1. Créer un bouton en HTML
  2. Modifier le style par défaut des boutons
    1. Modifier la couleur de l’arrière-plan
    2. Modifier la couleur du texte
    3. Modifier le style de la bordure
    4. Modifier la taille
  3. Modifier l’état des boutons
    1. Style de l’état du survol
    2. État du focus du style
    3. État du style actif
  4. Conclusion

C’est parti !

Table des matières

Comment créer un bouton en HTML


Pour créer un bouton, utilisez l’


Décomposons la ligne :

  • Vous ajoutez d’abord l’élément bouton, qui consiste en une balise ouvrante et une balise.
  • L’attribut type="button" de laouvrante 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, 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 :

Screenshot-2022-02-06-at-10.29.02-PM

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 ?

Screenshot-2022-02-06-at-10.29.02-PM

Comment modifier la couleur d’arrière-plan des boutons

Screenshot-2022-02-06-at-10.29.02-PM


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 ;
}

Screenshot-2022-02-06-at-10.28.30-PM

Comment modifier la couleur du texte des boutons

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PM


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 ;
}

Screenshot-2022-02-06-at-10.28.03-PM

Comment modifier le style de bordure des boutons ?

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PMScreenshot-2022-02-06-at-10.28.03-PM


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 ;
}

Screenshot-2022-02-06-at-10.27.33-PM

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 ;
  }

Screenshot-2022-02-06-at-10.26.57-PM

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) ;

Screenshot-2022-02-06-at-10.25.55-PM

Comment modifier la taille des boutons

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PMScreenshot-2022-02-06-at-10.28.03-PMScreenshot-2022-02-06-at-10.27.33-PMScreenshot-2022-02-06-at-10.26.57-PMScreenshot-2022-02-06-at-10.25.55-PM


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 ;
  }

Screenshot-2022-02-06-at-10.42.58-PM

Comment styliser les états des boutons

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PMScreenshot-2022-02-06-at-10.28.03-PMScreenshot-2022-02-06-at-10.27.33-PMScreenshot-2022-02-06-at-10.26.57-PMScreenshot-2022-02-06-at-10.25.55-PMScreenshot-2022-02-06-at-10.42.58-PM


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

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PMScreenshot-2022-02-06-at-10.28.03-PMScreenshot-2022-02-06-at-10.27.33-PMScreenshot-2022-02-06-at-10.26.57-PMScreenshot-2022-02-06-at-10.25.55-PMScreenshot-2022-02-06-at-10.42.58-PM


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.

hover

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

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PMScreenshot-2022-02-06-at-10.28.03-PMScreenshot-2022-02-06-at-10.27.33-PMScreenshot-2022-02-06-at-10.26.57-PMScreenshot-2022-02-06-at-10.25.55-PMScreenshot-2022-02-06-at-10.42.58-PMhover


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 :

focus-5

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 ;
}

focusend

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 ;
}

focusend1

Comment créer un style pour l’état :active

Screenshot-2022-02-06-at-10.29.02-PMScreenshot-2022-02-06-at-10.28.30-PMScreenshot-2022-02-06-at-10.28.03-PMScreenshot-2022-02-06-at-10.27.33-PMScreenshot-2022-02-06-at-10.26.57-PMScreenshot-2022-02-06-at-10.25.55-PMScreenshot-2022-02-06-at-10.42.58-PMhoverfocus-5focusendfocusend1


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:

active-1

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 ;
}

activefinal

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.

Pour en savoir plus sur la conception Web, consultez la certification Responsive Web Design de freeCodeCamp. Dans les leçons interactives, vous apprendrez le HTML et le CSS en réalisant 15 projets pratiques et 5 projets de certification.

Notez que la certification ci-dessus est toujours en version bêta. Si vous souhaitez obtenir la dernière version stable, cliquez ici.

Merci de votre lecture et bon codage !