Background Sweep

Ein farbiger Hintergrund wischt von einer Kante herein und schwingt elastisch leicht über.

Füge bei [wo] einen „Background Bounce Sweep“-Hover-Effekt hinzu.
Eine neue Hintergrundfarbe soll von einer Kante hereinwischen, mit elastischem Nachfedern leicht über die gegenüberliegende Kante hinausschießen und sich dann setzen, während die Textfarbe wechselt, damit alles lesbar bleibt; beim Verlassen gleitet sie sanft wieder hinaus.
Halte den Text über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern dehnt sich ein Rechteck im Element aus oder zieht sich zusammen und ändert so den Hintergrund.

Füge bei [wo] einen „Rectangle Fill“-Hover-Effekt hinzu.
Die neue Hintergrundfarbe soll sich von allen vier Kanten her schließen, während ein inneres Rechteck zur Mitte schrumpft, und sich beim Verlassen des Zeigers wieder öffnen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben: weich und schnell.
Halte die Beschriftung über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern öffnet oder schließt sich der Hintergrund wie Fensterläden von der Mitte oder von den Rändern aus.

Füge bei [wo] einen „Shutter Fill“-Hover-Effekt hinzu (auch shutter genannt).
Die neue Hintergrundfarbe soll sich von einer senkrechten Linie in der Mitte wie Fensterläden zu beiden Seiten öffnen und sich beim Verlassen wieder zur Mitte schließen, während die Schriftfarbe wechselt, damit der Text lesbar bleibt: weich und schnell.
Schneide die Füllung am Rand des Elements ab, halte den Text darüber 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.

Das Element schwebt nach oben und wippt dann beim Hovern fortlaufend auf und ab.

Füge bei [wo] einen „Bob“-Hover-Effekt hinzu (auch hang genannt).
Das Element soll ein Stück nach oben schweben und dann sanft auf und ab wippen, solange der Zeiger darüber bleibt, und beim Verlassen wieder absinken: langsam und weich.
Lass das Wippen nur beim Hovern laufen und halte das Element bei reduzierter Bewegung (prefers-reduced-motion) still.

Die Rahmenfarbe blendet beim Hovern ein oder wechselt weich.

Füge bei [wo] einen „Border Fade“-Hover-Effekt hinzu.
Der Rahmen soll weich von einem gedämpften Ton in die Akzentfarbe überblenden, solange der Zeiger über dem Element ist: dezent, ohne Bewegung oder Größenänderung.
Lass die Rahmenbreite in beiden Zuständen gleich, damit nichts verrutscht, und zeige denselben Effekt beim Tastaturfokus.

Konzentrische Rahmenringe breiten sich beim Hovern vom Element nach außen aus oder ziehen sich nach innen zusammen.

Füge bei [wo] einen „Border Ripple“-Hover-Effekt hinzu.
Wenn der Zeiger hineinfährt, sollen sich ein paar Rahmenringe nacheinander vom Element nach außen ausbreiten und verblassen: schnell und leicht, wie eine Welle im Wasser.
Spiel ihn einmal pro Hover ab statt in einer Schleife und lass die Ringe das umgebende Layout nicht verschieben.