Button-Design: Klickbare und barrierefreie UI

Gutes Button-Design bedeutet, das meistberührte Element einer Oberfläche verlässlich zu machen. Ein Button ist nicht bloß ein farbiges Rechteck; er ist ein Steuerelement, das klickbar wirkt, seinen Zustand klar signalisiert und auch mit der Tastatur funktioniert. In diesem Artikel bauen wir einen soliden Button rund um das Dreieck aus State, Größe und Kontrast und kommen zu einem Rahmen, den du sowohl in Figma als auch in echtem CSS anwenden kannst.

Warum der Button eine schwierige Komponente ist

Weil er klein wirkt, wird der Button beim Design oft zuletzt behandelt — dabei ist er das Element, mit dem Nutzer am häufigsten interagieren. Vor einem Button will jemand in Sekunden drei Fragen beantworten: Ist er klickbar? In welchem Zustand ist er gerade? Was wird er tun? Sind diese Antworten unklar, zögert der Nutzer, klickt falsch oder klickt gar nicht. Button-Design ist also keine Dekoration, sondern eine Frage der Kommunikation.

Ein guter Button hat diese Kernqualitäten:

• Affordance: Er hebt sich von seiner Umgebung ab und wirkt durch Füllung, Schatten oder Rand „drückbar".
• Zustands-Feedback: Er sieht beim Hover, beim Drücken, beim Fokus und im deaktivierten Zustand unterschiedlich aus.
• Hierarchie: Die primäre Aktion hebt sich klar von sekundären und tertiären Aktionen ab.
• Barrierefreiheit: Der Kontrast ist ausreichend, und er funktioniert mit Tastatur und Screenreadern.

States: die verborgene Hälfte eines Buttons

Ein statischer Button ist nur die halbe Arbeit. Worauf es wirklich ankommt, ist, wie sich der Button zwischen seinen States verhält. In der Praxis sind dies die States, die du gestalten musst:

• Default — der Ruhezustand.
• Hover — Zeiger darüber (nur bei Zeigegeräten).
• Active / Pressed — im Moment des Klicks, meist ein leichtes Abdunkeln oder eine Verschiebung um 1px nach unten.
• Focus — ein sichtbarer Ring bei der Navigation mit der Tastatur.
• Disabled — für Interaktion gesperrt, niedriger Kontrast.
• Loading — die Aktion läuft; ein Spinner oder eine Textänderung.

Diese in Figma als Component mit Varianten zu bauen, erleichtert eine Eins-zu-eins-Übereinstimmung mit der Entwicklung. Auf der CSS-Seite entspricht jeder State einer Pseudoklasse:

.btn {
  --bg: #2563eb;
  background: var(--bg);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font: 600 15px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover  { --bg: #1d4ed8; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}
.btn:disabled {
  --bg: #cbd5e1;
  color: #f1f5f9;
  cursor: not-allowed;
}

Hinweis: :focus-visible gibt Tastaturnutzern eine klare Fokusmarkierung, ohne denjenigen, die mit der Maus klicken, einen unnötigen Ring zu zeigen. Entferne den Fokusring niemals vollständig; das ist der häufigste Fehler, der Barrierefreiheit zerstört.

Größe, Klickfläche und Touch-Ziele

So groß ein Button visuell auch aussieht, entscheidend ist die Größe seiner klickbaren Fläche. Besonders auf Mobilgeräten müssen Ziele breit genug sein, um sie mit dem Finger genau zu treffen. Weithin akzeptierte Richtlinien:

• Minimales Touch-Ziel ca. 44×44 px (Apple) / ca. 48×48 dp (Google Material).
• Die Füllung (Padding), nicht die Texthöhe, bestimmt die echte Klickfläche des Buttons.
• Lass mindestens 8px zwischen benachbarten Buttons, um Fehlberührungen zu verringern.

Bei kleinen Icon-Buttons kannst du die Klickfläche mit transparentem Padding vergrößern, auch wenn die sichtbare Box klein ist. Denke auch die Größe als System: Drei Stufen wie sm, md, lg reichen für die meisten Produkte, wobei padding und font-size gemeinsam skalieren.

Kontrast und Hierarchie

Wenn sich mehrere Buttons einen Bildschirm teilen, muss der Nutzer sofort verstehen, welcher die Hauptaktion ist. Das baust du über Farbsättigung und Füllung auf:

• Primary — gefüllt, hoher Kontrast, meist einer pro Bildschirm.
• Secondary — mit Rand (Outline) oder leicht gefüllt, ruhiger.
• Tertiary / Ghost — nur Text, das geringste Gewicht.

Ziele für die Barrierefreiheit die WCAG-Textkontrastverhältnisse an: mindestens 4,5:1 für normalen Text und 3:1 für großen/fetten Text. Weißer Text auf blauer Füllung ist meist sicher; aber vermeide hellgrauen Text auf hellgrauer Füllung. Verlasse dich nicht allein auf Farbe: Unterstütze den Disabled-Zustand mit einem zusätzlichen Hinweis (etwa einer Cursor-Änderung) statt ihn nur abzudunkeln, denn farbenblinde Nutzer können den Farbton allein womöglich nicht unterscheiden.

Label, Icon und Microcopy

Der Text eines Buttons zählt genauso viel wie sein Design. Gute Labels sind handlungsorientiert und benennen das Ergebnis: „Änderungen speichern" ist oft klarer als „Speichern", und „Nachricht senden" klarer als „Senden". Ein paar praktische Regeln:

• Beginne mit einem Verb und halte es kurz (1–3 Wörter).
• Wenn du ein Icon verwendest, soll es dieselbe Bedeutung wie der Text verstärken, nicht ihr widersprechen.
• Gib einem Button mit nur einem Icon immer ein aria-label.

<button class="btn" aria-label="In den Warenkorb">
  <svg aria-hidden="true" focusable="false" ...></svg>
</button>

Hier verbirgt aria-hidden="true" das Icon vor Screenreadern, während aria-label die Bedeutung als Text liefert. Während des Ladens verhindert es Doppelklicks, den Button auf disabled zu setzen und den Text in etwa „Speichern…" zu ändern.

Ein Button-System aufbauen

Statt Buttons einzeln zu zeichnen, baue ein token-basiertes System. Halte Werte für Farbe, Radius, Abstand und Typografie in Variablen und leite Varianten daraus ab. So aktualisierst du bei einer Markenänderung von einer einzigen Stelle aus, und jeder Button bleibt konsistent. In Figma machst du das mit Komponenten + Varianten + Variablen; in CSS mit Custom Properties. Konsistenz sorgt dafür, dass Nutzer nicht jeden Button neu lernen müssen — was die wahrgenommene Qualität direkt steigert.

Häufige Fragen

Welche Farbe sollte der primäre Button haben?

Die Akzentfarbe deiner Marke ist ein sinnvoller Ausgangspunkt, solange sie mindestens 4,5:1 Kontrast zum Label bietet. Behalte einen primären Button pro Bildschirm bei; zwei „Hauptaktionen" erschweren dem Nutzer die Entscheidung.

Darf ich den Fokusring für das Design entfernen?

Nein. Den Fokusring zu entfernen macht den Button für Tastatur- und Screenreader-Nutzer unbrauchbar. Für ein klareres Aussehen passe die outline-Farbe und den outline-offset an, aber hinterlasse über :focus-visible immer eine sichtbare Markierung.

Sollte ich den Button deaktivieren oder eine Fehlermeldung zeigen?

In den meisten Fällen ist es besser, den Button aktiv zu lassen und beim Klick eine Meldung zu zeigen, die erklärt, was fehlt, als ihn stillschweigend zu deaktivieren, denn ein deaktivierter Button sagt nie, warum er nicht klickbar ist, und der Nutzer kommt nicht weiter.

Sehen deine Buttons immer noch so aus, als ließe sich „nicht klicken"? Ich helfe dir, deine Oberfläche in Bezug auf State, Kontrast und Barrierefreiheit zu überarbeiten. Kontaktiere mich, und machen wir deine Buttons sowohl schön als auch funktional.