Hover Border Gradient

Ein heller Lichtpunkt wandert am Rand einer Karte entlang.

Füge bei [wo] einen „Border Beam“-Effekt hinzu (auch shine border oder moving border genannt).
Ein kurzer, heller Lichtstreifen soll in gleichmäßigem, gemächlichem Tempo am Kartenrand entlangwandern und ohne sichtbaren Sprung in Schleife laufen.
Der Effekt darf Inhalt und Größe der Karte nicht verändern; stoppe den Lichtstreifen bei reduzierter Bewegung (prefers-reduced-motion).

Beim Hovern erscheint ein farbiger Lichtschein rund um das Element.

Füge bei [wo] einen „Glow“-Hover-Effekt hinzu (auch neon glow genannt).
Ein weicher farbiger Lichtschein soll um das Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: sanft, ohne Bewegung.
Lass den Schein das Layout nicht beeinflussen 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 erscheint unter dem Element ein weicher Schatten oder wird tiefer und deutet so Erhöhung an.

Füge bei [wo] einen „Hover Shadow“-Effekt hinzu (auch drop shadow on hover oder elevation on hover genannt).
Ein weicher Schatten unter dem Element soll tiefer und breiter werden, solange der Zeiger darüber ist, damit es angehoben wirkt, und beim Verlassen wieder zurückgehen, während das Element selbst an seinem Platz bleibt.
Halte den Schatten dezent genug für helle und dunkle Themes und zeige denselben Effekt beim Tastaturfokus.

Eine durchscheinende Überlagerung tönt das Element und zeigt so, dass der Zeiger darüber ist.

Füge bei [wo] einen „Hover State Layer“ hinzu (auch hover state, state layer oder hover overlay genannt).
Eine schwache, durchscheinende Überlagerung in der Inhaltsfarbe soll schnell über dem Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden.
Halte sie schwach, damit der Kontrast erhalten bleibt, und nutze denselben Layer-Ansatz für Fokus- und gedrückte Zustände.

Beim Hovern fällt ein Icon aus dem Sichtbereich und kehrt von oben zurück.

Füge bei [wo] einen „Icon Drop“-Hover-Effekt hinzu.
Das Icon im Element soll nach unten aus dem Sichtbereich fallen und dann von oben wieder an seinen Platz fallen: schnell, mit sanfter Landung.
Spiele ihn bei jedem Eintritt des Zeigers einmal ab statt in Schleife, und lass Beschriftung und Button-Größe unverändert.