Goed knopontwerp draait erom het meest aangeraakte onderdeel van een interface betrouwbaar te maken. Een knop is niet zomaar een gekleurde rechthoek; het is een besturingselement dat klikbaar aanvoelt, zijn status duidelijk toont en ook met het toetsenbord werkt. In dit artikel bouwen we een degelijke knop op rond de driehoek van state, grootte en contrast, en komen we tot een kader dat je zowel in Figma als in echte CSS kunt toepassen.
Waarom een knop een lastig component is
Omdat hij klein lijkt, wordt de knop vaak als laatste ontworpen — terwijl het juist het element is waarmee gebruikers het meest interacteren. Bij een knop wil iemand binnen seconden drie vragen beantwoorden: Is hij klikbaar? In welke status staat hij nu? Wat gaat hij doen? Zijn die antwoorden onduidelijk, dan aarzelt de gebruiker, klikt verkeerd, of klikt helemaal niet. Knopontwerp is dus geen versiering, maar een kwestie van communicatie.
Een goede knop heeft deze kernkwaliteiten:
- Affordance: hij steekt af tegen zijn omgeving en oogt "indrukbaar" door vulling, schaduw of rand.
- Statusfeedback: hij ziet er anders uit bij hover, bij indrukken, bij focus en wanneer hij uitgeschakeld is.
- Hiërarchie: de primaire actie springt duidelijk uit boven secundaire en tertiaire acties.
- Toegankelijkheid: het contrast is voldoende en hij werkt met toetsenbord en schermlezers.
States: de verborgen helft van een knop
Een statische knop is maar de helft van het werk. Het draait echt om hoe de knop zich tussen zijn states gedraagt. In de praktijk zijn dit de states die je moet ontwerpen:
- Default — de ruststand.
- Hover — aanwijzer erboven (alleen bij aanwijsapparaten).
- Active / Pressed — het moment van de klik, meestal een lichte verdonkering of een verschuiving van 1px naar beneden.
- Focus — een zichtbare ring tijdens navigeren met het toetsenbord.
- Disabled — gesloten voor interactie, laag contrast.
- Loading — de actie is bezig; een spinner of een tekstwijziging.
Deze in Figma bouwen als een Component met varianten maakt een een-op-een match met de ontwikkeling eenvoudig. Aan de CSS-kant komt elke state overeen met een pseudo-klasse:
.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;
}Let op: met :focus-visible geef je toetsenbordgebruikers een duidelijk focusteken zonder een onnodige ring te tonen aan wie met de muis klikt. Verwijder de focusring nooit volledig; dat is de meest voorkomende fout die toegankelijkheid breekt.
Grootte, klikgebied en aanraakdoelen
Hoe groot een knop er visueel ook uitziet, wat echt telt is de grootte van het klikbare gebied. Vooral op mobiel moeten doelen breed genoeg zijn om met een vinger nauwkeurig aan te tikken. Breed geaccepteerde richtlijnen:
- Minimaal aanraakdoel ~44×44 px (Apple) / ~48×48 dp (Google Material).
- De vulling (padding), niet de teksthoogte, bepaalt het echte klikgebied van de knop.
- Laat minstens 8px tussen naast elkaar liggende knoppen om misklikken te beperken.
Bij kleine icoonknoppen kun je het klikgebied vergroten met transparante padding, ook al is het zichtbare vak klein. Denk ook over grootte als een systeem: drie stappen zoals sm, md, lg volstaan voor de meeste producten, waarbij padding en font-size samen meeschalen.
Contrast en hiërarchie
Wanneer meerdere knoppen één scherm delen, moet de gebruiker meteen begrijpen welke de hoofdactie is. Dat bouw je op met kleurverzadiging en vulling:
- Primary — gevuld, hoog contrast, meestal één per scherm.
- Secondary — met rand (outline) of licht gevuld, rustiger.
- Tertiary / Ghost — alleen tekst, het laagste gewicht.
Streef voor toegankelijkheid naar de WCAG-contrastverhoudingen voor tekst: minstens 4,5:1 voor normale tekst en 3:1 voor grote/vette tekst. Witte tekst op een blauwe vulling is meestal veilig; maar vermijd lichtgrijze tekst op een lichtgrijze vulling. Vertrouw niet alleen op kleur: ondersteun de disabled-status met een extra hint (zoals een cursorwijziging) in plaats van alleen te vervagen, want kleurenblinde gebruikers kunnen alleen de tint mogelijk niet onderscheiden.
Label, icoon en microcopy
De tekst van een knop telt net zo zwaar als het ontwerp. Goede labels zijn actiegericht en benoemen het resultaat: "Wijzigingen opslaan" is vaak duidelijker dan "Opslaan", en "Bericht versturen" duidelijker dan "Versturen". Enkele praktische regels:
- Begin met een werkwoord en houd het kort (1–3 woorden).
- Gebruik je een icoon, laat het dezelfde betekenis als de tekst versterken, niet tegenspreken.
- Geef een knop met alleen een icoon altijd een
aria-label.
<button class="btn" aria-label="Aan winkelwagen toevoegen">
<svg aria-hidden="true" focusable="false" ...></svg>
</button>Hier verbergt aria-hidden="true" het icoon voor schermlezers, terwijl aria-label de betekenis als tekst levert. Tijdens het laden voorkomt het op disabled zetten van de knop en de tekst wijzigen naar bijvoorbeeld "Opslaan…" ook dubbelklikken.
Een knopsysteem opbouwen
Teken knoppen niet één voor één, maar bouw een token-gebaseerd systeem. Houd waarden voor kleur, radius, ruimte en typografie in variabelen, en leid varianten daaruit af. Zo werk je bij een merkwijziging vanaf één plek bij en blijft elke knop consistent. In Figma doe je dit met componenten + varianten + variabelen; in CSS met custom properties. Consistentie zorgt dat gebruikers niet elke knop opnieuw hoeven te leren — wat de waargenomen kwaliteit direct verhoogt.
Veelgestelde vragen
Welke kleur moet de primaire knop hebben?
De accentkleur van je merk is een verstandig vertrekpunt, zolang die minstens 4,5:1 contrast met het label geeft. Houd één primaire knop per scherm aan; twee "hoofdacties" maken de beslissing voor de gebruiker moeilijker.
Mag ik de focusring weghalen voor het ontwerp?
Nee. De focusring weghalen maakt de knop onbruikbaar voor toetsenbord- en schermlezergebruikers. Wil je een strakker uiterlijk, pas dan de outline-kleur en outline-offset aan, maar laat altijd een zichtbaar teken via :focus-visible.
Moet ik de knop uitschakelen of een foutmelding tonen?
In de meeste gevallen is de knop actief houden en bij een klik een bericht tonen dat uitlegt wat ontbreekt beter dan hem stilletjes uitschakelen, want een uitgeschakelde knop vertelt nooit waarom hij niet klikbaar is en de gebruiker loopt vast.
Zien je knoppen er nog steeds uit alsof je er "niet op kunt klikken"? Ik kan je helpen je interface te herzien op state, contrast en toegankelijkheid. Neem contact op en laten we je knoppen zowel mooi als functioneel maken.