Knoppen Maken en Stijlen

Knoppen zijn fundamentele interactieve elementen in webdesign. Tailwind CSS biedt diverse utilities om knoppen effectief te stylen en hun verschillende toestanden te beheren, zoals hover, focus en actief.

Basisstijl voor knoppen

Voor het stylen van een basis knop kun je utilities gebruiken voor achtergrondkleur, tekstkleur, opvulling, randradius en lettertypegewicht.

index.html

Uitleg

bg-yellow-500: Stelt de achtergrondkleur in op een tint blauw;
text-white: Stelt de tekstkleur in op wit;
font-bold: Maakt de tekst vetgedrukt;
py-2: Voegt verticale opvulling toe (0.5rem of 8px);
px-4: Voegt horizontale opvulling toe (1rem of 16px);
rounded: Voegt kleine afgeronde hoeken toe.

Hoverstatus

Om het uiterlijk van een knop te wijzigen wanneer de gebruiker eroverheen beweegt, kan de hover:-prefix met elke utility class worden gebruikt.

index.html

hover:bg-blue-700: Verandert de achtergrondkleur naar donkerblauw wanneer de knop wordt aangewezen.

Focusstatus

Om een knop te stijlen wanneer deze gefocust is (bijvoorbeeld wanneer deze met het toetsenbord is geselecteerd), kan de focus:-prefix met elke utility class worden gebruikt.

index.html

In dit voorbeeld verandert de knop naar blauw wanneer je met de muisaanwijzer over de knop beweegt. Als je de Tab-toets gebruikt, wordt de knop rood.

Actieve en Uitgeschakelde Staten

Actieve en uitgeschakelde statussen worden minder vaak gebruikt. Toch moeten we hier ook rekening mee houden.

Om een knop te stijlen wanneer deze actief is (bijvoorbeeld wanneer erop wordt geklikt), kun je het voorvoegsel active: gebruiken met elke utility class.

Om een knop te stijlen wanneer deze is uitgeschakeld (bijvoorbeeld wanneer deze niet kan worden gebruikt), kun je het voorvoegsel disabled: gebruiken met elke utility class.

index.html

Uitleg

active:bg-green-800: Verandert de achtergrondkleur naar een donkerdere tint groen wanneer de knop actief is (ingedrukt);
opacity-50: Vermindert de dekking van de knop om deze uitgeschakeld te laten lijken;
cursor-not-allowed: Wijzigt de cursor om aan te geven dat de knop niet klikbaar is;
disabled attribuut: Maakt de knop niet-interactief.

Voorbeeld van alle toestanden

Alle toestanden gecombineerd in één voorbeeld

index.html

Uitleg

bg-blue-500: Stelt de standaard achtergrondkleur in;
hover:bg-blue-700: Wijzigt de achtergrondkleur bij hover;
focus:outline-none: Verwijdert de standaard focusomlijning;
focus:ring-2: Voegt een focusring toe met een breedte van 2 pixels;
focus:ring-blue-600: Stelt de kleur van de focusring in;
focus:ring-opacity-50: Stelt de dekking van de focusring in;
active:bg-blue-800: Wijzigt de achtergrondkleur wanneer de knop actief is;
text-white: Stelt de tekstkleur in op wit;
font-bold: Maakt de tekst vetgedrukt;
py-2: Voegt verticale opvulling toe;
px-4: Voegt horizontale opvulling toe;
rounded: Voegt kleine afgeronde hoeken toe.

Opmerking

Als je dieper wilt ingaan op de Tailwind Button Component, vind je hier een link naar de officiële documentatie.

1. Hoe wijzig je de achtergrondkleur van een knop wanneer je eroverheen beweegt?

2. Welke utility class verwijdert de standaard focus-outline van een knop?

3. Welke utility class wijzigt de achtergrondkleur van een knop wanneer deze actief (ingedrukt) is?

Hoe wijzig je de achtergrondkleur van een knop wanneer je eroverheen beweegt?

Select the correct answer

bg-blue-700

hover:bg-blue-700

focus:bg-blue-700

active:bg-blue-700

Welke utility class verwijdert de standaard focus-outline van een knop?

Select the correct answer

focus:outline-none

focus:outline-0

no-outline

Welke utility class wijzigt de achtergrondkleur van een knop wanneer deze actief (ingedrukt) is?

Select the correct answer

active:bg-blue-800

pressed:bg-blue-800

hover:bg-blue-800

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 1

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 3.57

Knoppen Maken en Stijlen

Veeg om het menu te tonen

Basisstijl voor knoppen

Voor het stylen van een basis knop kun je utilities gebruiken voor achtergrondkleur, tekstkleur, opvulling, randradius en lettertypegewicht.

index.html

Uitleg

bg-yellow-500: Stelt de achtergrondkleur in op een tint blauw;
text-white: Stelt de tekstkleur in op wit;
font-bold: Maakt de tekst vetgedrukt;
py-2: Voegt verticale opvulling toe (0.5rem of 8px);
px-4: Voegt horizontale opvulling toe (1rem of 16px);
rounded: Voegt kleine afgeronde hoeken toe.

Hoverstatus

Om het uiterlijk van een knop te wijzigen wanneer de gebruiker eroverheen beweegt, kan de hover:-prefix met elke utility class worden gebruikt.

index.html

hover:bg-blue-700: Verandert de achtergrondkleur naar donkerblauw wanneer de knop wordt aangewezen.

Focusstatus

Om een knop te stijlen wanneer deze gefocust is (bijvoorbeeld wanneer deze met het toetsenbord is geselecteerd), kan de focus:-prefix met elke utility class worden gebruikt.

index.html

In dit voorbeeld verandert de knop naar blauw wanneer je met de muisaanwijzer over de knop beweegt. Als je de Tab-toets gebruikt, wordt de knop rood.

Actieve en Uitgeschakelde Staten

Actieve en uitgeschakelde statussen worden minder vaak gebruikt. Toch moeten we hier ook rekening mee houden.

Om een knop te stijlen wanneer deze actief is (bijvoorbeeld wanneer erop wordt geklikt), kun je het voorvoegsel active: gebruiken met elke utility class.

Om een knop te stijlen wanneer deze is uitgeschakeld (bijvoorbeeld wanneer deze niet kan worden gebruikt), kun je het voorvoegsel disabled: gebruiken met elke utility class.

index.html

Uitleg

active:bg-green-800: Verandert de achtergrondkleur naar een donkerdere tint groen wanneer de knop actief is (ingedrukt);
opacity-50: Vermindert de dekking van de knop om deze uitgeschakeld te laten lijken;
cursor-not-allowed: Wijzigt de cursor om aan te geven dat de knop niet klikbaar is;
disabled attribuut: Maakt de knop niet-interactief.

Voorbeeld van alle toestanden

Alle toestanden gecombineerd in één voorbeeld

index.html

Uitleg

bg-blue-500: Stelt de standaard achtergrondkleur in;
hover:bg-blue-700: Wijzigt de achtergrondkleur bij hover;
focus:outline-none: Verwijdert de standaard focusomlijning;
focus:ring-2: Voegt een focusring toe met een breedte van 2 pixels;
focus:ring-blue-600: Stelt de kleur van de focusring in;
focus:ring-opacity-50: Stelt de dekking van de focusring in;
active:bg-blue-800: Wijzigt de achtergrondkleur wanneer de knop actief is;
text-white: Stelt de tekstkleur in op wit;
font-bold: Maakt de tekst vetgedrukt;
py-2: Voegt verticale opvulling toe;
px-4: Voegt horizontale opvulling toe;
rounded: Voegt kleine afgeronde hoeken toe.

Opmerking

Als je dieper wilt ingaan op de Tailwind Button Component, vind je hier een link naar de officiële documentatie.

1. Hoe wijzig je de achtergrondkleur van een knop wanneer je eroverheen beweegt?

2. Welke utility class verwijdert de standaard focus-outline van een knop?

3. Welke utility class wijzigt de achtergrondkleur van een knop wanneer deze actief (ingedrukt) is?

Hoe wijzig je de achtergrondkleur van een knop wanneer je eroverheen beweegt?

Select the correct answer

bg-blue-700

hover:bg-blue-700

focus:bg-blue-700

active:bg-blue-700

Welke utility class verwijdert de standaard focus-outline van een knop?

Select the correct answer

focus:outline-none

focus:outline-0

no-outline

Welke utility class wijzigt de achtergrondkleur van een knop wanneer deze actief (ingedrukt) is?

Select the correct answer

active:bg-blue-800

pressed:bg-blue-800

hover:bg-blue-800

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 1