Chargement...

Boutons en CSS

Les boutons sont les contrôles « fais-le » — envoyer, enregistrer, suivant. CSS peut leur donner une peau claire et un retour honnête au survol, à la pression, au focus ou à l’état disabled. Gardez le HTML sémantique (button ou input submit) ; cette leçon porte sur l’apparence et les états.

Une boîte à outils des boutons

📊 Boutons en un coup d’œil

Pièce Rôle au quotidien
padding + background + border Construire une face de bouton solide et lisible
border-radius Adoucir les coins (ou aller pill avec un grand rayon)
:hover / :active Montrer « je suis interactif » et « je suis pressé »
:focus-visible Garder visible l’anneau de focus clavier
:disabled + cursor Atténuer les boutons indisponibles ; curseur main quand cliquable

Stylez une .btn partagée (ou button) pour que les actions principales de la page concordent. Le padding des champs texte était la leçon précédente — ici on habille les cibles de clic.

Un bouton primaire solide

Commencez par un padding confortable, un fond clair, une couleur de texte lisible et un border-radius calme. Préférez font: inherit pour que le bouton s’accorde au texte voisin.

Bouton primaire de base

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover et active — retour honnête

:hover peut assombrir ou éclaircir un peu la face. :active doit donner la sensation d’être pressé — une teinte plus sombre ou un tout petit décalage — pas un thème néon tout neuf.

Hover et active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Un focus que l’on voit

N’enlevez jamais les styles de focus sans remplacement. :focus-visible dessine un anneau clair pour le clavier tout en restant calme à la souris.

Anneau de focus visible

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Les boutons désactivés restent visibles

Un bouton disabled doit paraître indisponible — opacité plus faible ou couleurs atténuées — et refuser le curseur main. Ne le cachez pas de la mise en page.

Teinte disabled

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

Une habitude calme pour les boutons

Gardez une peau primaire, un hover/active clair, un anneau de focus visible et un disabled atténué. Les variantes outline/ghost peuvent partager le même padding et rayon pour que l’ensemble reste de la même famille.

Compagnon outline

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

À vous de jouer

  1. Stylez un button primaire avec padding, fond, couleur de texte et border-radius.
  2. Assombrissez :hover et approfondissez un peu :active.
  3. Ajoutez un outline :focus-visible — pas de outline: none nu.
  4. Atténuez un bouton :disabled et mettez cursor: not-allowed.
  5. Optionnel : ajoutez un .btn-outline frère qui partage padding et rayon.

Erreurs fréquentes

  • outline: none sans remplacement de focus (les utilisateurs clavier se perdent)
  • Padding minuscule qui rate les cibles tactiles mobiles
  • Transformer cette leçon en style d’input/textarea (c’était contrôles de formulaire)
  • Thème néon sauvage au :hover qui casse le calme de marque
  • Styler seulement les a et oublier les vrais button

Résumé

  • Padding, fond, bordure et rayon construisent une face de bouton solide
  • :hover et :active donnent un retour d’interaction honnête
  • Gardez un anneau :focus-visible visible
  • Atténuez :disabled ; utilisez cursor: pointer quand c’est cliquable
  • Laissez le chrome des champs à la leçon contrôles de formulaire ; ici on habille les cibles de clic

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 34 de 35
Css Tutoriel