Border Fade

Hintergrund- und Textfarbe blenden beim Hovern weich in eine neue Farbe über.

Füge bei [wo] einen „Background Fade“-Hover-Effekt hinzu (auch color fade genannt).
Hintergrund- und Textfarbe sollen weich in neue Farben überblenden, solange der Zeiger über dem Element ist, und beim Verlassen zurückblenden: ruhig, ohne Bewegung.
Achte in beiden Zuständen auf genug Kontrast zwischen Text und Hintergrund und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern erscheint eine innere Randlinie knapp innerhalb der Kante des Elements.

Füge bei [wo] einen „Trim“-Hover-Effekt hinzu.
Eine dünne Linie soll knapp innerhalb der Kante des Elements einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: dezent, ohne Bewegung.
Halte die Linie innerhalb des Elements, damit sich seine Größe nicht ändert, 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 leert sich der gefüllte Hintergrund, sodass nur ein umrandeter Button bleibt.

Füge bei [wo] einen „Hollow“-Hover-Effekt hinzu (auch ghost fill genannt).
Der gefüllte Hintergrund soll ausblenden, sodass nur die Kontur bleibt, und die Beschriftung soll die Farbe wechseln, damit sie auf dem leeren Hintergrund lesbar bleibt: weich und schnell.
Halte die Rahmenstärke in beiden Zuständen gleich, damit sich die Größe des Elements nicht ändert, 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.

Das Element skaliert mit elastischem Überschwingen, wenn das Hovern beginnt oder endet.

Füge bei [wo] einen „Bounce Scale“-Hover-Effekt hinzu (auch bounce in / out genannt).
Das Element soll sich federnd und sichtbar überschwingend etwas vergrößern, kurz über seine Endgröße hinausgehen und sich dann setzen, und beim Verlassen genauso zurückfedern.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Ein hervorgehobener Hintergrund gleitet in einem Raster zwischen den Karten und folgt der jeweils gehoverten Karte.

Füge bei [wo] einen „Card Hover Effect“ hinzu (auch sliding highlight card grid genannt).
Ein weicher, hervorgehobener Hintergrund soll hinter der gehoverten Karte erscheinen, fließend zur nächsten Karte gleiten, auf die der Zeiger wechselt, und ausblenden, wenn der Zeiger das Raster verlässt.
Lass den Tastaturfokus die Hervorhebung genauso bewegen und halte die Karten selbst an ihrem Platz.