Transition - Boutons

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

Aperçu du résultat 👇

Matériel Pen de départ Vous n’avez qu’à ajouter du CSS (nul besoin de modifier le HTML ou le JavaScript). Requis Utilisez un pseudo-élément afin d'ajouter l'émoji ☝️ dans chaque bouton. Déplacez ensuite cet émoji en plein centre sous chaque bouton. Chaque émoji doit-être invisible par défaut. Lorsqu'un bouton reçoit le focus, son émoji doit apparaitre en fondu en l'espace d'une demi-seconde ⏱. Bonus 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. 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. Notes de cours 📚