Stijlinstellingen

Tekstkleur

Kernpunt:
Stel de kleur en dekking van de knoptekst in.

Wat dit verandert:
Onvoldoende contrast verlaagt de leesbaarheid en daarmee de klikkans.

Insteltip:
Volg WCAG-contrastwaarden (normale tekst 4.5:1, grote tekst 3:1).

Instellingen

• Tekstkleur: kleur van de tekst.
• Alpha (Opaciteit): transparantie van de tekstkleur (0–1).
• Responsieve instellingen: per apparaat aparte waarden.

Ook voor hover kun je een aparte tekstkleur instellen.

Tekstschaduw

Kernpunt:
Voeg schaduw toe aan tekst voor betere leesbaarheid op beeldmateriaal.

Wat dit verandert:
Schaduwsterkte bepaalt de balans tussen duidelijkheid en decoratie.

Insteltip:
Begin met lage Blur en lage Alpha.

Instellingen

• Tekstschaduw (AAN/UIT)
• Kleur
• Blur + eenheid
• Horizontaal + eenheid
• Verticaal + eenheid
• Responsieve instellingen

Rand

Kernpunt:
Stel randkleur, dikte en stijl in.

Wat dit verandert:
De knopomtrek wordt duidelijker, ook op lichte achtergronden.

Insteltip:
Start rond 1px en verhoog alleen indien nodig.

Instellingen

• Rand (AAN/UIT)
• Kleur + Alpha
• Breedte
• Stijl (none / solid / dashed / dotted)
• Boxmodel (border-box / content-box)
• Responsieve instellingen

Bij border-box telt de rand mee in de totale breedte/hoogte.

Hoekradius

Kernpunt:
Regel hoe rond de hoeken van de knop zijn.

Wat dit verandert:
Grote invloed op de visuele toon (strak vs. zacht).

Insteltip:
Ongeveer 20-35% van de knophoogte werkt vaak goed.

Instellingen

• Individuele instellingen gebruiken
• Uniform: Hoekradius + eenheid
• Individueel: Linksboven / Rechtsboven / Rechtsonder / Linksonder + eenheid
• Eenheid: px / % / em / rem
• Responsieve instellingen

Binnenste schaduw

Kernpunt:
Geeft een ingedrukt/inzet-effect.

Wat dit verandert:
Voegt subtiele diepte toe aan vlakke ontwerpen.

Insteltip:
Houd Blur en Alpha laag om een verouderde look te voorkomen.

Instellingen

• Binnenste schaduw (AAN/UIT)
• Kleur
• Blur
• Horizontaal
• Verticaal
• Spreiding
• Responsieve instellingen

Schaduw

Kernpunt:
Buitenste schaduw om de knop los te maken van de achtergrond.

Wat dit verandert:
Richting en afstand bepalen het dieptegevoel.

Insteltip:
Op mobiel komt schaduw vaak sterker over; stel daar lager in.

Instellingen

• Schaduw (AAN/UIT)
• Kleur + Alpha
• Blur
• Horizontaal
• Verticaal
• Spreiding
• Responsieve instellingen

Opaciteit

Kernpunt:
Stel algemene dekking en overvloeimodus in.

Wat dit verandert:
Dezelfde kleur kan er sterk anders uitzien door dekking en blend mode.

Insteltip:
Corrigeer eerst tekst-/achtergrondcontrast, pas daarna opaciteit aan.

Instellingen

• Opaciteit
• Overvloeimodus (normal / multiply / screen / overlay)
• Responsieve instellingen

Lage opaciteit beïnvloedt ook tekst en iconen.

Overgang

Kernpunt:
Snelheid van de overgang van normaal naar hover.

Wat dit verandert:
Te snel valt niet op, te traag voelt stroperig.

Insteltip:
Begin met 200-350ms.

Instellingen

• Duur (ms)
• Vertraging (ms)
• Easing
• Aangepaste waarde (cubic-bezier)
• Reset

Deze overgang geldt voor stijl-eigenschappen zoals tekstkleur, rand, hoekradius, schaduw en opaciteit.