Hoeveel padding gebruik je in een knop?
Een knop krijgt meestal twaalf tot zestien pixels padding boven en onder, en vierentwintig tot tweeëndertig links en rechts.
Horizontaal dus ruwweg het dubbele van verticaal.
Dat is wat een knop de vertrouwde vorm geeft.
De ondergrens op mobiel
De hele knop moet minstens vierenveertig bij vierenveertig pixels zijn. Bij een letter van zestien pixels haal je dat met veertien pixels padding.
Meer daarover lees je bij accessibility.
Waarom horizontaal meer
Omdat tekst breedte heeft en hoogte niet. Gelijke padding rondom laat een knop te hoog en te smal ogen.
Meer daarover lees je bij css.
Bij een grote knop
Vergroot je padding mee, niet alleen je letter. Anders houd je een grote letter in een krap vakje.
Meer daarover lees je bij design system.
Mijn vuistregels
- Verticaal twaalf tot zestien pixels.
- Horizontaal het dubbele.
- Minstens vierenveertig pixels totale hoogte.
- Twee formaten volstaan: gewoon en groot.
Die laatste houdt je knoppen consequent over je hele site.
De ruimte ernaast
Staan er twee knoppen naast elkaar, houd dan minstens acht pixels ertussen. Anders raakt een duim allebei.
Meer daarover lees je bij grid.
Bij een tekstlink als knop
Ook daar hoort padding, ook al zie je geen rand. Anders is het klikgebied precies zo groot als de letters.
Meer daarover lees je bij breakpoint.