Interactive Hover Button

Ein Icon schwebt aus dem Button und blendet aus, während ein neues hereinschwebt.

Füge bei [wo] einen „Icon Float Away“-Hover-Effekt hinzu.
Das aktuelle Icon soll nach oben wegschweben und ausblenden, während ein neues Icon von unten sanft an seinen Platz schwebt; beim Verlassen des Zeigers soll sich der Wechsel umkehren.
Halte die Button-Größe während des Wechsels fest und zeige denselben Effekt beim Tastaturfokus.

Ein Overlay gleitet von der Seite herein, über die der Zeiger kam, und verschwindet zur Seite, über die er geht.

Füge bei [wo] einen „Direction Aware Hover“-Effekt hinzu (auch direction-aware overlay genannt).
Ein Overlay soll von der Seite hereingleiten, über die der Zeiger kam, und zu der Seite hinausgleiten, über die er das Element verlässt: schnell und weich.
Ermittle die Seite aus der Zeigerposition beim Betreten und Verlassen und nutze bei Touch oder Tastaturfokus eine feste Standardrichtung.

Beim Hovern gleitet ein Pfeil oder das Element selbst ein paar Pixel vor oder zurück.

Füge bei [wo] einen „Nudge Forward / Backward“-Hover-Effekt hinzu (auch arrow nudge genannt).
Der Pfeil soll ein kleines Stück in seine Zeigerichtung gleiten, solange der Zeiger über dem Element ist, und beim Verlassen zurückgleiten: schnell und knapp.
Bewege nur den Pfeil, ohne Beschriftung oder Layout zu verschieben, und zeige denselben Effekt beim Tastaturfokus.

Ein farbiger Hintergrund wischt beim Hovern von einer Kante aus über das Element.

Füge bei [wo] einen „Background Sweep“-Hover-Effekt hinzu (auch background fill oder slide fill genannt).
Eine neue Hintergrundfarbe soll von der linken zur rechten Kante darüberwischen, weich und schnell, ohne Nachfedern, und sich beim Verlassen genauso zurückziehen, während die Textfarbe wechselt, damit alles lesbar bleibt.
Beschneide die Füllung auf die Form des Elements und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst eine Kontur vom Element nach außen oder zieht sich zu ihm zusammen.

Füge bei [wo] einen „Outline Expand“-Hover-Effekt hinzu.
Eine Kontur soll bündig an der Kante des Elements beginnen und nach außen wandern, bis ringsum eine kleine Lücke bleibt, dort beim Hovern stehen bleiben und sich beim Verlassen des Zeigers wieder schließen: weich und schnell.
Zeichne die Kontur so, dass sie die Größe des Elements nicht ändert und benachbarte Inhalte nicht verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst über dem Text eine Linie von links, aus der Mitte oder von rechts.

Füge bei [wo] einen „Overline Grow“-Hover-Effekt hinzu.
Eine Linie über dem Text soll aus der Mitte nach beiden Seiten wachsen, solange der Zeiger darüber ist, und beim Verlassen zur Mitte zurückschrumpfen: schnell und weich.
Reserviere Platz für die Linie, damit der Text nicht springt, und zeige denselben Effekt beim Tastaturfokus.