Un bouton qui réagit — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Un bouton qui réagit

Variables, transitions, animations et projet · niveau 1 (application)

Énoncé

Écrire la feuille d'un bouton « Commander » (fond ocre, texte #222) qui, au survol et au focus clavier, s'éclaire (fond #f0a35e), s'élève de 2 pixels et allonge son ombre, en 200 millisecondes, avec une courbe qui paraisse naturelle. Le mouvement doit disparaître pour les visiteurs qui le réduisent. Vérifier le contraste du texte dans les deux états.

Corrigé


.bouton:hover,
.bouton:focus-visible {
  background: var(--ocre-clair);
  box-shadow: 0 6px 14px rgb(0 0 0 / 20%);
  translate: 0 -2px;
}

@media (prefers-reduced-motion: no-preference) {
  .bouton {
    transition:
      background-color var(--duree) ease-out,
      box-shadow var(--duree) ease-out,
      translate var(--duree) ease-out;
  }
}

La transition est déclarée sur l'état de départ, pour jouer dans les deux sens, avec ease-out, la courbe des réactions à une action. Les trois propriétés sont nommées. Pour qui réduit les animations, le bouton change d'aspect instantanément : l'information (« ce bouton est actif ») est conservée, seul le mouvement disparaît. Contrastes : texte #222 sur ocre, 5,3:1 ; sur ocre clair, 7,7:1. Le focus clavier reçoit en plus un contour bleu nuit. La page complète est code/ch10/exercices/bouton.html.