Studio-Bühne
kreativstudio-buehneSchwarz, Weiß, ein Signalton · Pille · 400 ms expo.out
Komponente 04Button
Fünf Typen. Sieben Zustände. Ein Satz Tokens.
Unser Button-System für Kundenseiten: Hierarchie, Maße, Bewegung je Zustand und die Regeln für Trefferfläche und Kontrast. Darunter alle Button-Muster des Fundus zum Ausprobieren und welches zu welchem Rezept passt.
- 44 pxTrefferfläche
- 4,5 : 1Label-Kontrast
- 1Primärer je Ansicht
- 28Rezepte zugeordnet
Spezimen · Primär · L
Zeigen, tabben, klicken
- Ruhe
- Hover
- Fokus
- Druck
- Deaktiviert
- Laden
- Erfolg
Zustand
Bewegung
Kontrast
Dieselben Buttons in drei Rezepten
Manufaktur-Stille
luxus-manufaktur-stilleAnthrazit, Weiß, Messing nur als Linie · eckig · 250 ms
Fahrschule
fahrschule-freundlich-buchbarCreme, Navy, Kennzeichen-Gelb · 14 px · Überschwinger
01 · HierarchieWer wie laut sein darf
Die Rangfolge entsteht über Fläche, Kante und Unterstrich, nicht über Größe. Je Ansicht gibt es genau eine primäre Handlung. Labels beginnen mit dem Verb und nennen die Folge: „Angebot senden“, nicht „OK“.
Primär p-*
Eine je Ansicht. Die Handlung, für die die Seite gebaut ist. Volle Fläche im Signalton.
Sekundär s-*
Gleichwertige Alternative. Fläche wie der Grund, Kante mindestens 3 : 1. Nie zwei primäre nebeneinander.
Tertiär t-*
Nebenhandlung als Text. Unterstrich statt Kante, Fläche erst beim Hover. Trefferfläche bleibt 44 px.
Icon i-*
Nur vertraute Symbole. Immer mit aria-label, Tooltip beim Verweilen und bei Fokus. Klein sichtbar, 44 px tastbar.
Gefahr g-*
Folgen, die bleiben. Verb nennt die Folge, danach eine Rückfrage. Nie nur über Rot unterscheiden.
Im Formular
primär · sekundär · tertiär · deaktiviert · ladenIn der Liste
icon · gefahr mit Rückfrage- Lahnwerk MöbelShop · Entwurf 3 · geändert heute
- Hofgut ElbenrodBuchung · live seit 14.10.2026
- Archiv 2019 bis 202227 Projekte · nur lesend
Archiv wirklich löschen? 27 Projekte mit allen Dateien. Das lässt sich nicht rückgängig machen.
02 · TokensMaß, Form, Bewegung
Die Werte unten liest die Seite direkt aus den CSS-Variablen der Komponente. Ein Rezept setzt nur diese Tokens neu, das Markup bleibt gleich. Unter „Rezept-Welten“ sieht man, wie sie sich ändern.
Maß und Form Quermaß
| Token | Wert | Wofür |
|---|---|---|
| --b-h-s / m / l | Höhe der drei Größen | |
| --b-px-s / m / l | Innenabstand links und rechts | |
| --b-gap | Abstand Icon zu Label | |
| --b-abstand | Abstand zwischen Buttons | |
| --b-radius | Ecken, Icon-Button gleich | |
| --b-kante | Rahmenstärke aller Typen | |
| --b-schrift | Schrift des Labels | |
| --b-groesse-s / m / l | Schriftgröße je Größe | |
| --b-fokus-* | Fokusring Breite und Versatz | |
| --b-druck | Skalierung beim Drücken |
Mehr erfahren
Bewegung je Zustand Quermaß
| Zustand | Was | Dauer | Kurve | Reduziert |
|---|---|---|---|---|
| Hover | Fläche, Schrift, Kante | bleibt (Farbe) | ||
| Fokus | Ring wächst auf Versatz | Ring ohne Übergang | ||
| Druck ein | scale auf --b-druck | nur Farbe | ||
| Druck aus | Feder zurück | nur Farbe | ||
| Laden | Label tauscht, Spinner | Spinner steht, Text trägt | ||
| Erfolg | Häkchen zeichnet sich | Häkchen sofort | ||
| Deaktiviert | keine Bewegung | 0 ms | – | – |
03 · ZuständeJeder Typ, jeder Zustand
Die Matrix friert alle Zustände ein. Unter jedem Knopf steht der Kontrast des Labels gegen seine Fläche, berechnet aus den Tokens. Deaktiviert heißt hier aria-disabled: Der Knopf bleibt fokussierbar und sagt, warum er nicht geht.
RuheGrundzustand
Hovernur mit Zeiger
Fokus:focus-visible
Druck:active
Deaktiviertaria-disabled
Ladenaria-busy
Erfolgrole=status
Primär
Sekundär
Tertiär
Icon
Gefahr
Trefferfläche44 × 44 px
Sichtbar darf ein Knopf kleiner sein; ein ::after mit negativem inset macht ihn tastbar. WCAG 2.5.8 verlangt 24 px, wir nehmen 44.
Label≥ 4,5 : 1
In jedem Zustand, auch deaktiviert und im Ladezustand. Gedämpft über eine eigene Textfarbe, nie über Deckkraft.
Kante und Fokus≥ 3 : 1
Rahmen sekundärer Buttons und der Fokusring gegen den Grund. Fokus nie ersatzlos entfernen, im Kontrastmodus Systemfarben.
Doppelklick1 ×
Während des Ladens ignoriert der Knopf weitere Klicks (aria-busy). Der Server prüft trotzdem selbst.
04 · GalerieAlle Button-Muster im Fundus
Schlanke Nachbauten zum Anfassen, nicht die vollen Demos. Jede Karte führt zur Detailseite mit Messwerten, Varianten und Code. Wähle ein Rezept, um die passenden Muster hervorzuheben und ausgeschlossene zu markieren.
-
Empfohlen Im Rezept ausgeschlossen
Glas-Button
Frost über dem Foto: unscharfer Saum mit Lichtkante, dichter Kern unter dem Label. Ohne Unschärfe oder bei reduzierter Transparenz deckend.
Varianten: frost · liquid · getoent · glanz
buttons / glas-button -
Empfohlen Im Rezept ausgeschlossen
Pfeil-Icon-Button
Der Icon-Kreis wächst zur ganzen Pille, das Label wird weiß. Nur das Icon trägt die Bewegung.
Varianten: kreis-expand · tausch · linie · seitenwechsel
buttons / pfeil-icon-button -
Empfohlen Im Rezept ausgeschlossen
Tiefen-Taste (3D)
Front, Kante und Schatten als Stapel: Hover hebt auf −6 px mit Überschwinger, Druck setzt in 34 ms auf −2 px.
Varianten: stapel · versatz-brutal · keycap · soft
buttons / tiefen-taste-3d -
Empfohlen Im Rezept ausgeschlossen
Kontur, die sich zeichnet
Die Linie läuft bei Hover und Fokus einmal um den Knopf (pathLength 1, 480 ms), zurück mit Anlauf.
Varianten: zeichnen · ecken · doppel · laufend
buttons / kontur-button-zeichnen -
Empfohlen Im Rezept ausgeschlossen
Button-Gruppe expressiv
Verbundene Toggle-Gruppe: Druck macht breiter und eckiger, Auswahl macht rund und zeigt ein Häkchen.
Varianten: toggle · einzeln · split
buttons / button-gruppe-expressiv -
Empfohlen Im Rezept ausgeschlossen
Button-Zustandsfolge
Hover, Druck, Laden und Erfolg am selben Knopf, alle Labels liegen übereinander, nichts springt.
mikroanimationen / button-zustaende -
Empfohlen Im Rezept ausgeschlossen
Druck-Feedback
Einfedern 100 ms auf scale .96, zurück mit gedämpfter Feder (linear(), etwa 16 % Überschwinger).
mikroanimationen / druck-feedback -
Empfohlen Im Rezept ausgeschlossen
Gedrückt halten
Annehmen per Halten: Die Fläche füllt sich in 1,2 s, Loslassen spult dreimal so schnell zurück. Leertaste und Enter halten ebenso.
mikroanimationen / hold-to-confirm -
post@quermass.deEmpfohlen Im Rezept ausgeschlossenKopieren-Feedback
Bestätigung direkt am Knopf: Icon und Label tauschen mit Unschärfe, nach 2 s zurück; Ansage per role=status.
mikroanimationen / kopieren-feedback -
Empfohlen Im Rezept ausgeschlossen
Fokus als Gestaltung
Fokus in der Markensprache, hier als Signalfläche: Gelb mit Unterkante, mindestens 3 : 1. Rechts eingefroren, links mit Tab live.
Varianten: ring · doppel · signal
zugang / fokus-stil-system -
Empfohlen Im Rezept ausgeschlossen
Magnetischer Button
Der Knopf zieht sich zum Zeiger (Stärke 24 px), das Label folgt mit 12 px, zurück mit Feder. Nur mit Maus.
hover / magnetische-elemente -
Empfohlen Im Rezept ausgeschlossen
Füllung vom Eintrittspunkt
Die Fläche wächst als Kreis genau dort, wo der Zeiger eintritt, und zieht sich zum Austrittspunkt zurück (600 ms expo.out).
Varianten: basis · pixel
hover / fuellung-vom-eintrittspunkt -
Empfohlen Im Rezept ausgeschlossen
Füllung vom Eintrittspunkt · Pixel
Variante pixel: Zellen von 8 px füllen sich in sechs Stufen zu 80 ms vom Eintrittspunkt aus, ohne Kurve, nur Takt.
Varianten: pixel
hover / fuellung-vom-eintrittspunkt -
Empfohlen Im Rezept ausgeschlossen
Form-Morph (Pfeil)
Die Fläche morpht per clip-path vom Rechteck zur Pfeilspitze, das Label rückt 8 px nach.
Varianten: basis · gooey
hover / clip-path-form-hover -
Empfohlen Im Rezept ausgeschlossen
Form-Morph · Gooey
Variante gooey: Ein Tropfen löst sich aus der Pille und wird zur Icon-Blase (SVG-Filter aus Blur und Farbmatrix).
Varianten: gooey
hover / clip-path-form-hover -
Empfohlen Im Rezept ausgeschlossen
Text-Roll beim Hover
Das Label liegt doppelt in einer Zeilenmaske, eine Zeichenwelle rollt die Kopie herein (12 ms Versatz, 800 ms).
schrift-animationen / text-roll-hover -
Empfohlen Im Rezept ausgeschlossen
Icon-Squash-and-Stretch
Der Pfeil streckt sich: Schaft wird länger, die Spitze rückt vor (200 ms quad.out). Wirkt gezeichnet statt mechanisch.
mikroanimationen / icon-squash-stretch -
Empfohlen Im Rezept ausgeschlossen
Verlaufsrahmen · Button
Variante button: Ein Lichtstreif läuft um die Pille, aber nur bei Hover und Fokus; sonst steht eine ruhige Lichtkante.
Varianten: button
glas-material / verlaufs-rahmen -
Empfohlen Im Rezept ausgeschlossen
Grain · Button
Variante button: körniger Verlauf auf der Kaufbox-Fläche. Deckende Grundfarbe als Rückfall, Korn per feTurbulence-Kachel.
Varianten: button
glas-material / grain-noise-overlay -
Empfohlen Im Rezept ausgeschlossen
Taktile Taste (Porzellan)
Lichtkante oben, Haarlinie, gestaffelte Schatten; beim Drücken sinkt der Knopf 2 px ein.
glas-material / neo-skeuomorph-taktile-ui -
Empfohlen Im Rezept ausgeschlossen
Eckenform per corner-shape
Der Knopf wechselt beim Hover von Fase zu Squircle (corner-shape, 300 ms). Ohne Unterstützung bleibt eine normale Rundung.
Varianten: basis · formen
mikroanimationen / corner-shape-eckenformen -
2 gemerktEmpfohlen Im Rezept ausgeschlossen
Merken mit Herz
Icon-Button mit aria-pressed: Das Herz springt mit Überschwinger, ein Ring zerstreut sich, der Zähler zählt.
mikroanimationen / like-herz-burst -
Empfohlen Im Rezept ausgeschlossen
Menü-Button-Morph
Zwei Linien werden zum X, das Label rollt von „Menü“ zu „Schließen“; aria-expanded trägt den Zustand.
navigation / menue-icon-und-label-morph -
Abo „Gartenkiste“ zum 31.12.2026 kündigen?
Kündigung eingegangen. Bestätigung per E-Mail (Demo).
Empfohlen Im Rezept ausgeschlossenKündigungs-Button
Pflicht-Button in zwei Stufen: „Verträge hier kündigen“ führt zur Bestätigung „jetzt kündigen“. Gefahrfarbe erst im zweiten Schritt.
Varianten: richtig
sektionen / widerruf-und-kuendigung-schaltflaeche
05 · RezepteRezept → passender Button-Typ
Ein Haupttyp, höchstens ein zweiter. Die Wahl folgt aus Stimmung, Animationsstil und den Ausschlüssen des Rezepts. Was ein Rezept unter „nicht verwenden“ führt, taucht hier nie auf.
| Rezept | Stimmung · Bewegung | Button-Muster | Warum |
|---|---|---|---|
| Architektur: ruhiges Rasterarchitektur-ruhiges-raster | ruhig, präzise, zurückhaltendtoken-swiss-knackig |
|
Ruhig und sachlich, token-swiss-knackig: Bewegung nur im kleinen Pfeil oder in der Kontur, keine Fläche, die aufspringt. Projektfotos tragen die Farbe. |
| Handwerk: Werkstatt und Klartexthandwerk-werkstatt-klartext | bodenständig, vertrauenswürdig, materialnahtoken-tech-praezise |
|
Ein Signalton nur für Anfrage und Anruf: Die Füllung macht ihn beim Zeigen satt. Nebenwege wie Leistungen und Referenzen bekommen eine Kontur mit Eckklammern. Magnet ist ausgeschlossen (Agentur-Geste). |
| Fahrschule: freundlich und buchbarfahrschule-freundlich-buchbar | freundlich, ermutigend, klartoken-federnd-verspielt |
|
Freundlich und ermutigend, token-federnd-verspielt: Die Taste federt nur am Button, nicht in Formularfeldern. Die Anmeldung zeigt Laden und Erfolg. Halten-zum-Bestätigen ist ausgeschlossen. |
| Immobilien: diskret und hochwertigimmobilien-diskret-hochwertig | seriös, hochwertig, ruhigtoken-editorial-langsam |
|
Seriös, token-editorial-langsam: dunkle Pille, nur der Pfeil bewegt sich. „Bewertung anfragen“ bestätigt sich ruhig am Knopf. Keine Tiefe, kein Glanz. |
| Gastronomie: warm und einladendgastro-warm-appetitlich | warm, einladend, persönlichtoken-editorial-langsam |
|
Warm und einladend, meist mobil: „Tisch reservieren“ als ruhige Pille, nur der Pfeil tauscht. Tippen muss sich gut anfühlen, darum antwortet der Knopf mit spürbarem Druck. Kein Effekt, der vom Essen ablenkt. |
| Boutique-Hotel: Gastgeber mit Haltungboutique-hotel-gastgeber | gastfreundlich, entspannt, hochwertigtoken-luxus-weich |
|
Die Fotos tragen die Stimmung: Buchen und Formulare als Pille in der Hausfarbe mit tauschendem Pfeil, Glas nur über dem Hero-Foto. Magnet ist ausgeschlossen, Bewegung bleibt ruhig (token-luxus-weich). |
| Kreativstudio: Studio-Bühnekreativstudio-buehne | laut, selbstbewusst, kinematischtoken-editorial-langsam |
|
Laut und selbstbewusst, Schwarz-Weiß plus ein Signalton: Der Kreis wird beim Kontakt-CTA zur Signalfläche, Text-Roll ist die Signatur in Navigation und Links. Kein Glow. |
| Freelancer: Stille Visitenkartefreelancer-stille-visitenkarte | ruhig, präzise, persönlichtoken-tech-praezise |
|
Ruhig und präzise, Graustufen: Konturpille mit wanderndem Kreis, „E-Mail kopieren“ bestätigt sich am Knopf. Magnet und Cursor-Effekte sind ausgeschlossen. |
| Fotografie und Film: Bild zuerstfotograf-film-bild-zuerst | zurückhaltend, filmisch, kuratierttoken-kinetisch-inout |
|
Bild zuerst: Buttons bleiben Kontur oder Textlink, damit keine Fläche Farbe ins Bild wirft. Grain und Filter sind ausgeschlossen, weil sie fremde Textur über Werke legen. |
| Mode und Beauty: Kollektion und Ritualmode-beauty-kollektion | kuratiert, ruhig, warmtoken-luxus-weich |
|
Kuratiert und ruhig: getöntes Glas über dem Kampagnenbild, im Shop leise Text-Rollen in Light/Regular. Warenkorb-Flug und Konfetti sind ausgeschlossen. |
| Kultur: Programm und Haltungkultur-programm-haltung | sachlich, grafisch, zugänglichtoken-swiss-knackig |
|
Grafisch und sachlich, token-swiss-knackig: Pixel-Füllung im Takt statt Überschwinger (die sind ausgeschlossen), Eckklammern wie Passermarken für Nebenaktionen. |
| Luxus und Manufaktur: Stilleluxus-manufaktur-stille | luxuriös, präzise, ruhigtoken-toggle-asymmetrisch |
|
Luxuriös und still, Messing nur als Linie: Die Kontur zeichnet sich, eine Fläche gibt es nur für die Hauptaktion. Magnet und Schimmer sind ausgeschlossen. |
| SaaS & KI: das Produkt zeigt sich selbstsaas-produkt-praezise | präzise, technisch, ruhigtoken-tech-praezise | Das Produkt zeigt sich selbst, token-tech-praezise: Gruppen und Split-Button wie in der App, Kopieren für Befehle und Schlüssel. Magnet und Glitzer sind ausgeschlossen. | |
| Kanzlei & Beratung: Haltung und Klarheitkanzlei-beratung-souveraen | seriös, souverän, klartoken-swiss-knackig | Seriös und zurückhaltend: Textlink mit Stripe-Pfeil für Rechtsgebiete, das Kontaktformular zeigt Laden und Eingang ohne Show. Magnet und Custom-Cursor sind ausgeschlossen. | |
| Praxis & Therapie: ruhig und zugewandtpraxis-gesundheit-ruhig | ruhig, vertrauensvoll, warmtoken-tech-praezise | Ruhig und zugänglich, Kontrast vor Effekt: „Termin anfragen“ bestätigt sich klar, Behandlungen führen per Textlink weiter. Magnet und Grain sind ausgeschlossen. | |
| Online-Kurs & Coaching: klarer Lernwegkurs-coaching-lernweg | klar, ermutigend, persönlichtoken-federnd-verspielt |
|
Ermutigend und klar, token-federnd-verspielt: Die Taste lädt zum Klicken ein, der Lichtlauf um „Platz sichern“ läuft nur bei Hover und Fokus. Kein Countdown-Druck. |
| Onlineshop & Produktmarke: Produkt zuerstd2c-produkt-zuerst | sympathisch, direkt, hochwertigtoken-toggle-asymmetrisch |
|
Sympathisch und direkt: Split-Button für „In den Warenkorb“ mit Nebenformen, körnige Fläche für die Kaufbox. Produktfotos bleiben unverfälscht. |
| Verein & Non-Profit: Wirkung zeigenverein-nonprofit-wirkung | engagiert, glaubwürdig, nahbartoken-kinetisch-inout | Glaubwürdig und sparsam: „Jetzt spenden“ zeigt Laden und Dank am Knopf, die Füllung kostet nichts. Hochglanz wie Glas und Holo passt nicht zu Spendengeld. | |
| Salon: Handschrift und Terminfriseur-salon-handschrift | stilbewusst, persönlich, warmtoken-studio-signatur |
|
Stilbewusst und warm, ein Lackrot nur für „Termin buchen“: Füllung vom Eintrittspunkt, als Akzent die Pfeil-Form. Magnet und SVG-Verzerrung sind ausgeschlossen. |
| Studio: Rhythmus und Kursplanfitness-studio-rhythmus | energisch, direkt, motivierendtoken-brutal-hart |
|
Energisch, token-brutal-hart: harter Versatz und Pixel-Füllung im Takt, die Limette als Fläche. Verlaufsrahmen und Glow sind ausgeschlossen (Gym-Klischee). |
| Pflegedienst: Nähe und Klartextpflege-dienst-naehe | nah, verlässlich, klartoken-toggle-asymmetrisch | Nah und verlässlich, viele ältere Leser: große Knöpfe, Laden und Bestätigung in Worten, Wege zu Leistungen als Textlink mit Pfeil. Kein Glas (Kontrast), kein Magnet. | |
| Musik und Kunst: Ära und Bühnemusik-kuenstler-buehne | laut, experimentell, eigenständigtoken-brutal-hart |
|
Laut und eckig wie ein Plakat, token-brutal-hart: Die harte Taste gilt nur für die eine Haupthandlung („Anhören“, „Tickets“). Termine und Downloads bekommen die laufende Kontur. Glas und Lichtrahmen sind ausgeschlossen, neben Dither oder Marmor wären sie ein zweiter Effekt. |
| Industrie-Mittelstand: Datenblatt und Fachpersonindustrie-b2b-mittelstand | präzise, sachlich, belastbartoken-swiss-knackig | Sachlich wie ein Datenblatt: „Anfrage senden“ zeigt Laden und Eingang mit Vorgangsnummer, Nebenwege wie Datenblatt und Download als Kontur mit Eckklammern. Glas, Lichtrahmen und Magnet sind ausgeschlossen (SaaS-Glanz, Agentur-Geste). | |
| Kfz-Werkstatt und Autohaus: Festpreis, Termin, fertigkfz-werkstatt-autohaus | bodenständig, schnell, klartoken-toggle-asymmetrisch |
|
Schnell und bodenständig: Die Tiefen-Taste gibt es nur für „Termin buchen“, höchstens einmal je Ansicht. Alle anderen Knöpfe bleiben flach mit tauschendem Pfeil. Glas über Hallenfotos und Magnet sind ausgeschlossen. |
| Arbeitgeber: Einblick statt Floskelarbeitgeber-karriere | ehrlich, nahbar, konkrettoken-federnd-verspielt |
|
Ehrlich und nahbar, meist am Handy: Klatschmohn mit Füllung vom Eintrittspunkt nur für „Bewerben“. Links zu Stellen als Textlink mit Pfeil. Magnet und die Ecken-Signatur der Pflege sind ausgeschlossen. |
| Bestattung: würdig und klarbestattung-wuerdig | ruhig, würdig, klartoken-luxus-weich | Ruhig und würdig: „Rückruf anfordern“ zeigt Laden und Bestätigung in Worten, ohne Überschwingen. Weitere Wege als Textlink mit Pfeil, keine Pille. Druck-Feedback, Herz und Magnet sind ausgeschlossen, weil sie verspielt wirken. | |
| Eventlocation: ein Tag, der in die Nacht gehteventlocation-hochzeit | festlich, emotional, großzügigtoken-studio-signatur |
|
Festlich über Licht und Schrift: Mohnrot mit Füllung vom Eintrittspunkt nur für die Haupthandlung (Anfragen, Datum übernehmen), Nebenwege als Messing-Doppelkontur. Glas, Herz und Magnet sind ausgeschlossen. |
| Weingut und Hofladen: Herkunft zuerstweingut-hofladen-herkunft | bodenständig, klar, warmtoken-luxus-weich | Herkunft zuerst, eckig wie ein Etikett: Buntsandstein gefüllt nur für Kaufen und Tickets, mit Laden und „Im Warenkorb“ am Knopf. Nebenwege als Kontur mit Eckklammern wie Passermarken. Das Herz ist ausgeschlossen. |