Inloggen Account aanvragen

Buttons

Buttons zijn er in vele verschijningsvormen en deze kunnen verschillende functies hebben. We laten voorbeelden zien van verschillende tekstbuttons, selectiebuttons en bedieningsknoppen.

Tekstbuttons

Buttons met tekst zijn er in opvallende en minder opvallende vorm. De opvallendste hebben een kleurvlak waardoor ze de aandacht trekken, al dan niet gecombineerd met een icoon. Minder opvallend zijn de buttons met transparante achtergrond en kaderomlijning. Het minst opvallend zijn tekstbuttons zonder kleurvlak of omlijning. Zorg in alle gevallen voor een goede leesbaarheid met voldoende contrast tussen de tekst en de achtergrond.

Button met afmeting formaat

Een button is minimaal 44px hoog. De breedte wordt bepaald door de lengte van de tekst met links en rechts een extra marge van 16 px. Het gebruikte font is hier Rijksoverheid Sans Web Text en is 20 pixels groot. De minimale ruimte tussen buttons is 8 pixels.

Blauwe button met status normaal, status mouse over en status bij klik
  • Een button in een donkere kleur heeft witte tekst voor een goed leesbaar contrast.
  • Bij een mouseover krijgt het kleurvlak een zwarte overlay van 20% en blijft de tekst 100% wit.
  • Bij een klik krijgt de mouseover button een extra gekleurde rand van de focuskleur.
Gele button met status normaal, status mouse over en status bij klik
  • Een button in een lichte kleur heeft zwarte tekst voor een goed leesbaar contrast. 
  • Bij een mouseover krijgt het kleurvlak een witte overlay van 40%  en blijft de tekst 100% zwart.
  • Bij een klik krijgt de mouseover button een extra gekleurde rand van de focuskleur.
Button status inactief
  • Een inactieve button in een donkere kleur is 20% van de hoofdkleur. De tekst blijft 100% wit.
  • Een inactieve button in een lichte kleur is 20% van de hoofdkleur. De tekst is 20% zwart.
buttons met icoon

Voorbeelden van buttons met icoon. De status van mouseover of klik zijn gelijk aan die van de buttons met kleurvlak.

transparante button

Transparante buttons zijn een alternatief wanneer kleurvlak buttons te overheersend zijn.

transparante button op gele achtergrond

Ook wanneer de aandacht vooral naar de achtergrond gaat zoals boven een kleurvlak of foto bieden transparante buttons een uitkomst.

Tekstbutton in kapitalen

Tekstbuttons zijn minder opvallend en zien er uit als een tekstlink. We gebruiken kapitalen voor een beter onderscheid met overige tekst. Omdat we kapitalen gebruiken wordt de lettergrootte iets verkleind. Bij een mouseover of klik verschijnt een gekleurd kader op de achtergrond (20% van de hoofdkleur). Deze heeft  hetzelfde formaat als een volvlak button.

Selectiebuttons

Selectiebuttons kom je onder andere bij formulieren tegen. Met selectievakjes kun je uit een opsomming van onderdelen meerdere keuzes aanvinken. Bij radio buttons is slechts 1 keuze mogelijk. Wanneer uit 2 opties gekozen moet worden is een switch button makkelijk en overzichtelijk.

Werktekening selectievakjes, radio buttons, switch button en slider

Voorbeelden van selectievakjes in niet-geactiveerde en wel-geactiveerde status. Bij activeren krijgt de button een rand met de focuskleur. Zie ook component 'Beslisboom' waarin selectiebuttons zijn toegepast.

Bedieningsknoppen

Het bedieningspaneel van een videospeler bevat meerdere knoppen. Bedieningsknoppen hebben een neutrale grijze achtergrond met iconen die de functie van de knop symboliseren.

Bedieningspaneel van een videospeler met bedieningsknoppen
Bedieningsknoppen met status mouseover en bij klik
  • Een bedieningsbutton heeft hier een icoon in de linkkleur donkerblauw, de achtergrond is neutraal grijs 1.
  • Bij een mouseover krijgt de achtergrond een overlay van 20% zwart, het icoon houdt de linkkleur donkerblauw
  • Bij een klik krijgt de mouseover button een extra rand in de focuskleur
Voorbeelden van bedieningsbuttons

Meer voorbeelden van bedieningsknoppen met mouseover status en bij klik.

Back-to-top button

Op mobiel heb je vaak hele lange pagina's met content waarbij er flink gescrollt moet worden om de onderkant van de pagina te bereiken. De back-to-top button helpt je in 1 klik terug te keren naar het hoofdmenu aan het begin van de pagina.

werktekening back-to-top button