labo. 01 - exercice 03

Bouton animé #1

L'objectif est de faire un effet de survol qui fait apparaitre un arrière plan de droite à gauche derrière le texte du bouton.

HTML

La structure HTML est déjà fournie. Veuillez prendre le temps de regarder et d'analyser le fichier partials/_ex03.html

Configuration de base sur .button-anim

Ajouter une bordure rouge de 2px
Ajuster le padding pour 20px à gauche et à droite et 5px en haut et en bas

État de survol

Avant d'aller trop loin dans l'effet de survol à créer. Nous allons le faire sans utiliser la pseudo-classe :hover. Ça nous permettra de voir ce qui se passe sans avoir à passer la souris par dessus. Une fois qu'on sera satisfait on l'ajoutera à la pseudo-classe de notre bouton.

Répéter les étapes de .link-item-bg de l'exercice 01 pour ajouter une masse avec la couleur --color-bg-secondary derrière votre texte

État caché

Maintenant que nous avons créé l'état de survol, il faut cacher le cacher par défaut afin qu'il ne soit visible qu'au survol. Pour cet effet, nous allons descendre encore plus bas notre ligne.

Translation vers la gauche

Faire une transformation pour déplacer sur l' axes des X de toute la longueur et un skew de 45deg

Si vous avez effectué une translation de -100%, vous verrez qu'on voit encore une coin de la masse blanche. Vous pouvez augmenter légèrement le pourcentage pour la faire disparaitre complètement vers la gauche.

Il faut maintenant cacher la masse. Vous pouvez utiliser la boite de votre .button-anim comme masque. Vous pouvez mettre un overflow: hidden; qui cachera tout ce qui dépasse de l'intérieur.
Ajouter aussi le bon display afin de pouvoir profiter de certaines propriétés qui ne peuvent pas être appliquées sur un élément inline.

Effet survol

Ajouter sur le hover la transformation inverse pour faire apparaitre la ligne.
Ajouter une transition de .3s avec un ease-out seulement sur le transform.