Icoonknoppen zonder achtergrond

Subtiele knopweergave.

Benodigde stappen:

  1. Voeg de class icon toe aan de knop om gebruik te maken van de visuele weergave van een icoonknop.
  2. Voeg de class van het gewenste icoon toe op de knop. Voor meer informatie zie: Iconen.

Aandachtspunten:

  • Icoonknoppen zonder achtergrond geven geen tekst weer. Voeg wel altijd de knoptekst toe voor gebruikers die gebruik maken van hulptechnologiën.

button

Visuele weergave:

HTML-voorbeeld:

<button class="icon-only icon-cat">Lorem ipsum</button>

button met img

Visuele weergave:

HTML-voorbeeld:

<button href="{base}/components/button-icon" class="icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></button>

Link als knop met img

Visuele weergave:

Lorem ipsum Kat

HTML-voorbeeld:

<a href="{base}/components/button-icon" class="button icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></a>

Instelbare variabelen