Pour cet exercice nous allons indiquer quel bouton a le focus à l’aide de l’émoji ☝️.

Aperçu du résultat 👇

Matériel

Requis

  1. Utilisez un pseudo-élément afin d'ajouter l'émoji ☝️ dans chaque bouton.

  2. Déplacez ensuite cet émoji en plein centre sous chaque bouton.

  3. Chaque émoji doit-être invisible par défaut.

  4. Lorsqu'un bouton reçoit le focus, son émoji doit apparaitre en fondu en l'espace d'une demi-seconde ⏱.

Bonus

  1. Ajoutez une animation CSS faisant rebondir de haut en bas les émojis du quart de leur hauteur afin d'attirer l'attention de l'usager.

  2. Retirez le outline ajouté par défaut aux boutons par le navigateur, puisque les émojis permettent maintenant d'indiquer lequel parmi ceux-ci a le focus.