Hollow

La couleur du fond et celle du texte passent en fondu vers une nouvelle couleur au survol.

Ajoute un effet au survol « Background Fade » (aussi appelé color fade) sur [où].
Les couleurs du fond et du texte doivent passer en fondu vers de nouvelles couleurs tant que le pointeur survole l’élément, puis revenir quand il sort : calme, sans mouvement.
Garde un contraste suffisant entre texte et fond dans les deux états et applique le même effet au focus clavier.

Au survol, un filet intérieur apparaît juste à l’intérieur du bord de l’élément.

Ajoute un effet au survol « Trim » sur [où].
Un filet fin doit apparaître en fondu juste à l’intérieur du bord de l’élément tant que le pointeur est dessus, puis disparaître quand il sort : discret, sans mouvement.
Garde le filet à l’intérieur de l’élément pour que sa taille ne change pas, et applique le même effet au focus clavier.

La couleur de la bordure apparaît ou change en fondu au survol.

Ajoute un effet au survol « Border Fade » sur [où].
La bordure doit passer en fondu d’une teinte discrète à la couleur d’accent tant que le pointeur survole l’élément : subtil, sans mouvement ni changement de taille.
Garde la même épaisseur de bordure dans les deux états pour que rien ne bouge et applique le même effet au focus clavier.

Une bordure en dégradé s’anime autour de l’élément et s’étend quand le pointeur le survole.

Ajoute un effet « Hover Border Gradient » sur [où].
Un court reflet en dégradé doit reposer sur une partie de la bordure ; tant que le pointeur survole l’élément, il doit faire le tour de la bordure à vitesse régulière pendant que toute la bordure s’illumine d’une lueur douce.
N’anime la bordure qu’au survol et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Au survol, une ombre douce apparaît ou s’accentue sous l’élément pour suggérer qu’il s’élève.

Ajoute une ombre au survol (Hover Shadow) sur [où], aussi appelée drop shadow on hover ou elevation on hover.
Une ombre douce sous l’élément doit s’accentuer et s’étaler tant que le pointeur le survole pour qu’il paraisse surélevé, puis s’estomper quand il le quitte, sans que l’élément lui-même bouge.
Garde l’ombre assez discrète pour fonctionner en thème clair comme en thème sombre, et affiche le même effet au focus clavier.

Une couche translucide teinte l’élément pour indiquer que le pointeur le survole.

Ajoute un « Hover State Layer » (aussi appelé hover state, state layer ou hover overlay) sur [où].
Une couche translucide et légère dans la couleur du contenu doit apparaître rapidement en fondu sur l’élément tant que le pointeur le survole, puis disparaître quand il le quitte.
Garde-la légère pour préserver le contraste, et utilise le même principe de couche pour les états focus et pressé.