Rectangle Fill

Au survol, le fond s’ouvre ou se ferme comme des volets, depuis le centre ou depuis les bords.

Ajoute un effet au survol « Shutter Fill » (aussi appelé shutter) sur [où].
La nouvelle couleur de fond doit s’ouvrir depuis une ligne verticale au centre vers les deux côtés, comme des volets, puis se refermer vers le centre quand le pointeur sort, tandis que la couleur du texte change pour rester lisible : fluide et rapide.
Garde le remplissage rogné à l’intérieur de l’élément et le texte au-dessus, et applique le même effet au focus clavier.

Au survol, un cercle coloré s’agrandit depuis le centre ou se rétracte vers lui pour remplir l’élément.

Ajoute un effet de survol « Radial Fill » (aussi appelé circle expand) sur [où].
Un cercle de la nouvelle couleur doit s’agrandir en douceur depuis le centre jusqu’à remplir l’élément, puis se rétracter vers le centre quand le pointeur sort, pendant que la couleur du libellé change pour rester lisible.
Garde le cercle découpé dans la forme de l’élément et le libellé au-dessus, 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.

Un fond coloré balaie l’élément depuis un bord avec un léger dépassement élastique.

Ajoute un effet au survol « Background Bounce Sweep » sur [où].
Une nouvelle couleur de fond doit balayer l’élément depuis un bord, dépasser légèrement le bord opposé avec un rebond élastique puis se stabiliser, pendant que la couleur du texte change pour rester lisible ; quand le pointeur sort, elle ressort en glissant en douceur.
Garde le texte au-dessus du remplissage et applique le même effet au focus clavier.

L’élément pivote de quelques degrés au survol.

Ajoute un effet de survol « Rotate » sur [où].
L’élément doit pivoter légèrement dans le sens des aiguilles d’une montre tant que le pointeur le survole, puis revenir quand il sort : fluide et discret.
Évite que la mise en page autour ne bouge, et affiche le même effet au focus clavier.

Les coins de l’élément s’arrondissent en douceur au survol.

Ajoute un effet au survol « Round Corners » sur [où].
Les angles vifs de l’élément doivent s’arrondir en douceur tant que le pointeur est dessus, puis redevenir nets quand il sort : doux et rapide.
Garde la taille de l’élément inchangée et applique le même effet au focus clavier.

Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.

Ajoute un effet au survol « Shine Sweep » (aussi appelé sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) sur [où].
Une douce bande de lumière diagonale doit balayer l’élément de gauche à droite, puis recommencer après une courte pause tant que le pointeur reste dessus.
Garde la bande rognée à l’intérieur de l’élément, arrête-la quand le pointeur sort et ne la joue pas si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).