Trim

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.

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.

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.

Eine Linie gleitet von der Unter- oder Oberkante an ihren Platz und unter- oder überstreicht das Element.

Füge bei [wo] einen „Underline Reveal“-Hover-Effekt hinzu (auch overline reveal oder reveal genannt).
Eine Linie über die volle Breite soll von knapp unterhalb der Unterkante nach oben an ihren Platz gleiten, solange der Zeiger über dem Element ist, und beim Verlassen wieder nach unten aus dem Blick gleiten: schnell und weich.
Schneide die Linie an der Kante ab, damit sie durch Gleiten erscheint statt durch Einblenden oder Wachsen, und zeige denselben Effekt beim Tastaturfokus.

Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.

Füge bei [wo] einen „Wobble Card“-Effekt hinzu.
Wenn sich der Zeiger über die Karte bewegt, soll sie sich leicht zu ihm hin verschieben, während ihr Inhalt sich leicht in die Gegenrichtung verschiebt und etwas vergrößert, weich folgend, und beim Verlassen kehrt alles an seinen Platz zurück.
Halte die Bewegung klein und schalte sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.

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.