Interactive Hover Button

Une icône s’échappe du bouton en flottant et s’efface pendant qu’une nouvelle arrive.

Ajoute un effet de survol « Icon Float Away » sur [où].
L’icône actuelle doit s’élever en flottant et s’effacer pendant qu’une nouvelle icône monte d’en bas pour prendre sa place, en douceur, et l’échange doit s’inverser quand le pointeur sort.
Garde la taille du bouton fixe pendant l’échange, et affiche le même effet au focus clavier.

Un calque glisse depuis le côté par lequel le pointeur est entré et repart vers le côté par lequel il sort.

Ajoute un effet « Direction Aware Hover » (aussi appelé direction-aware overlay) sur [où].
Un calque doit glisser depuis le côté par lequel le pointeur est entré et repartir vers le côté par lequel il sort : rapide et fluide.
Détermine le côté à partir de la position du pointeur à l’entrée et à la sortie et, au toucher ou au focus clavier, utilise une direction par défaut.

Au survol, une flèche ou l’élément lui-même glisse de quelques pixels vers l’avant ou vers l’arrière.

Ajoute un effet de survol « Nudge Forward / Backward » (aussi appelé arrow nudge) sur [où].
La flèche doit glisser un peu dans la direction qu’elle indique tant que le pointeur survole l’élément, puis revenir quand il le quitte : rapide et léger.
Ne déplace que la flèche, sans décaler le libellé ni la mise en page, et affiche le même effet au focus clavier.

Un fond coloré balaie l’élément depuis un bord au survol.

Ajoute un effet au survol « Background Sweep » (aussi appelé background fill ou slide fill) sur [où].
Une nouvelle couleur de fond doit balayer l’élément du bord gauche vers le bord droit, de façon fluide et rapide, sans rebond, puis se retirer de la même manière quand le pointeur sort, pendant que la couleur du texte change pour rester lisible.
Garde le remplissage découpé dans la forme de l’élément et applique le même effet au focus clavier.

Au survol, un contour s’écarte de l’élément ou se resserre vers lui.

Ajoute un effet de survol « Outline Expand » sur [où].
Un contour doit partir collé au bord de l’élément et s’en écarter pour laisser un petit espace tout autour, rester ainsi pendant le survol et se refermer quand le pointeur sort : fluide et rapide.
Dessine le contour sans changer la taille de l’élément ni pousser le contenu voisin, et affiche le même effet au focus clavier.

Au survol, une ligne se déploie au-dessus du texte depuis la gauche, le centre ou la droite.

Ajoute un effet de survol « Overline Grow » sur [où].
Une ligne au-dessus du texte doit s’étendre du centre vers les deux côtés tant que le pointeur le survole, puis se rétracter vers le centre quand il sort : rapide et fluide.
Réserve de la place pour la ligne afin que le texte ne bouge pas, et affiche le même effet au focus clavier.