Shrink

Das Element sinkt kurz ein und kommt zurück, als würde man einen echten Knopf drücken.

Füge bei [wo] einen „Push“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell kleiner werden und auf seine normale Größe zurückfedern, als würde es wie ein echter Knopf hineingedrückt.
Spiele ihn einmal pro Hover ab statt in Schleife, und verhindere, dass sich das umgebende Layout verschiebt.

Das Element schrumpft beim Drücken leicht und federt beim Loslassen zurück.

Füge bei [wo] einen „Press (Button Tap Scale)“-Effekt hinzu (auch tap feedback oder press state genannt).
Solange es gedrückt wird, soll das Element leicht schrumpfen und etwas dunkler werden und beim Loslassen mit einem kleinen Federn auf volle Größe zurückspringen: schnell und dezent.
Zeige dasselbe Feedback bei Tastatur und Touch und verhindere, dass sich das umgebende Layout verschiebt.

Beim Hovern rutscht das Element ein paar Pixel nach unten, als würde es in die Seite gedrückt.

Füge bei [wo] einen „Sink“-Hover-Effekt hinzu.
Das Element soll ein wenig nach unten rutschen und dort bleiben, solange der Zeiger darüber ist, als würde es in die Seite gedrückt, und beim Verlassen wieder hochkommen: weich, ohne Nachfedern.
Verschiebe es nur optisch, ohne das umgebende Layout zu bewegen, und zeige denselben Effekt beim Tastaturfokus.

Das Element schrumpft und blendet aus, bis es verschwindet.

Füge bei [wo] eine „Zoom Out“-Ausblendanimation hinzu (auch scale out genannt).
Das Element soll zur Mitte hin schrumpfen und dabei ausblenden, bis es verschwindet: schnell, zum Ende hin beschleunigend.
Nimm es erst aus dem Layout und dem Tastaturfokus, wenn es verschwunden ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

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.

Das Element neigt sich beim Hovern seitlich schräg.

Füge bei [wo] einen „Skew“-Hover-Effekt hinzu.
Das Element soll sich seitlich in eine leichte Schräglage neigen, solange der Zeiger darüber ist, und sich beim Verlassen wieder aufrichten: schnell und weich.
Halte den Text in der Schräglage lesbar, verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.