Wie sich die Druckanimation eines Buttons richtig anfühlt
Ein praktischer Leitfaden zum Druckfeedback: was animieren, wie stark, wie schnell, und wie es für Tastatur und reduzierte Bewegung funktioniert.
Kernaussage
Eine gute Druckanimation beginnt im selben Frame wie der Klick oder das Tippen, ändert ein oder zwei visuelle Eigenschaften nur leicht und kehrt schnell zurück. Meist reichen eine leichte Skalierung und eine Farb- oder Schattenänderung. Es geht um Bestätigung, nicht um Dekoration: Lass die Trefferfläche gleich, verschiebe das Label nicht weit und sorge dafür, dass Tastatur- und Reduced-Motion-Nutzer dasselbe Signal bekommen.
Wofür der Druckzustand wirklich da ist
Die Animation beantwortet eine Frage: Hat die Oberfläche meine Eingabe erhalten? Diese Frage stellt sich in den ersten Frames. Kommt die visuelle Antwort erst nach dem Klick-Handler, wirkt die Oberfläche getrennt, obwohl sie funktioniert. Starte die Änderung beim Drücken, nicht beim Loslassen, und lass die Rückkehr danach laufen.
Wähle die kleinste Änderung, die klar lesbar ist
Gute Druckeffekte bewegen sich sehr wenig. Eine Skalierung von etwa 0,96 bis 0,98, ein etwas dunklerer Hintergrund oder ein gestauchter Schatten reichen meist. Den Button zu skalieren ist sicher, weil der Text nicht neu umbricht; Padding, Breite oder Außenabstände zu ändern verschiebt alles um ihn herum.
- Skaliere den Button, nicht seine Schriftgröße
- Dunkle die Fläche leicht ab, statt einen Schein hinzuzufügen
- Lass die Trefferfläche vollständig, auch wenn der Button gedrückt aussieht
- Verschiebe das Label nicht so weit, dass die Orientierung verloren geht
Timing: Druck schnell, Rückkehr natürlich
Der Druck muss sofort wirken; ein sehr kurzer Übergang oder eine steife Feder genügt. Die Rückkehr darf etwas langsamer und weicher sein, denn dort entsteht der Charakter. Füge keine Verzögerung vor dem Druckzustand ein und warte nicht auf die Netzwerkanfrage, bevor du Feedback zeigst.
Federn und Übergänge haben unterschiedliche Aufgaben
Ein CSS-Übergang ist einfach und günstig für einen festen Druck. Eine Feder ist besser, wenn der Button mitten in der Animation erneut gedrückt werden kann, wenn er Teil einer Geste ist oder wenn die Rückkehr die Energie des Drucks erben soll. Du brauchst keine Feder an jedem Button, nur dort, wo wirklich unterbrochen wird.
Tastatur, Touch und reduzierte Bewegung
Tastaturnutzer aktivieren Buttons mit Eingabe oder Leertaste und brauchen ebenfalls eine sichtbare Reaktion. Behalte einen klaren Fokusring und entferne die Browser-Kontur nicht ohne Ersatz. Bei reduzierter Bewegung verkürze die Animation oder ersetze die Skalierung durch einen sofortigen Farbwechsel.
Eine kurze Prüfliste
Drücke den Button so schnell du kannst und prüfe, ob Zustände hängen bleiben. Drücke, ziehe den Zeiger vom Button weg und lass los: Er muss in den Ruhezustand zurückkehren. Teste auf einem Mittelklasse-Handy und aktiviere den Button per Tastatur, um zu sehen, ob dasselbe Feedback erscheint.
Produktionsnahes Implementierungsbeispiel
/* Press feedback without layout work */
.button {
transition: transform 120ms ease-out, background-color 120ms ease-out;
}
.button:active {
transform: scale(0.97);
background-color: #e8431a;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: background-color 80ms linear;
}
.button:active {
transform: none;
}
}Wichtige Prinzipien
- Starte den Druckzustand beim Drücken, nicht nach dem Klick-Handler
- Ändere Skalierung oder Farbe nur leicht, niemals Layout-Eigenschaften
- Die Rückkehr darf weicher und langsamer sein als der Druck
- Tastaturnutzer brauchen dieselbe Bestätigung wie Mausnutzer
- Reduzierte Bewegung soll den Weg verkürzen, nicht das Feedback entfernen
Häufige Fragen
Quellen
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI