Press (Button Tap Scale)

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 verkleinert sich weich ein wenig, solange der Zeiger darüber ist.

Füge bei [wo] einen „Shrink“-Hover-Effekt hinzu (auch scale down genannt).
Das Element soll sich weich ein wenig verkleinern, solange der Zeiger darüber ist, und beim Verlassen wieder wachsen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

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.

Hält man ein Element kurz gedrückt, löst das zusätzliche Aktionen oder eine Fortschrittsfüllung aus.

Füge bei [wo] eine „Long Press“-Interaktion hinzu (auch press and hold oder touch and hold genannt).
Solange das Element gedrückt gehalten wird, soll es leicht einsinken, während eine Fortschrittsfüllung gleichmäßig darüberläuft; ist sie voll, federt es zurück und öffnet sein Menü, und frühes Loslassen bricht ab und setzt die Füllung zurück.
Gib Tastatur- und Screenreader-Nutzern einen anderen Weg zu denselben Aktionen und verhindere, dass das Halten Text markiert oder das Kontextmenü des Browsers öffnet.

Zieht man eine Liste nach unten, erscheint ein Ladekreisel, und beim Loslassen wird der Inhalt neu geladen.

Füge bei [wo] eine „Pull to Refresh“-Interaktion hinzu (auch swipe to refresh genannt).
Wird die Liste oben nach unten gezogen, soll sie dem Finger mit etwas Widerstand folgen und einen Ladekreisel zeigen, der sich beim Ziehen dreht; nach dem Loslassen dreht er sich weiter, während der Inhalt neu lädt, dann gleitet die Liste sanft wieder nach oben.
Starte es nur, wenn die Liste schon ganz oben ist, und biete Tastatur- und Screenreader-Nutzern zusätzlich einen normalen Aktualisieren-Button.

Eine kreisförmige Welle breitet sich vom genauen Klick- oder Tippunkt aus und verblasst.

Füge bei [wo] einen „Ripple“-Effekt hinzu (auch material ripple oder ink ripple genannt).
Bei jedem Klick oder Tippen soll sich eine weiche, kreisförmige Welle vom genauen Druckpunkt ausbreiten, bis sie das Element bedeckt, und dabei verblassen: schnell und leicht.
Beschneide die Welle auf die Form des Elements, lass jeden schnellen Druck seine eigene Welle starten und starte sie bei Tastatureingaben aus der Mitte.

Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.

Füge bei [wo] eine „Success Checkmark“-Animation hinzu (auch animated success tick genannt).
Ein Kreis soll sich in einem weichen Strich selbst zeichnen, dann erscheint das Häkchen darin, und das ganze Zeichen ploppt sanft ein wenig auf: ruhig und selbstsicher.
Spiele sie einmal ab, wenn die Aktion gelingt, ergänze eine Textmeldung, die Screenreader vorlesen können, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Zeichen.