Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: Stijlknoppen | Basiscomponenten Bouwen
Tailwind CSS voor Webontwikkeling

bookUitdaging: Stijlknoppen

Taak

Gebruik Tailwind CSS om een knop te maken die aan de volgende eisen voldoet:

  1. De knop moet een blauwe achtergrond hebben (bijv. bg-blue-500);
  2. Wanneer er over de knop wordt gehoverd, moet de achtergrondkleur veranderen naar een donkerdere tint blauw (bijv. bg-blue-700);
  3. Wanneer de knop gefocust is, moet de achtergrondkleur geel zijn (bijv. bg-yellow-500);
  4. Wanneer de knop actief is (ingedrukt), moet de achtergrondkleur veranderen naar een nog donkerdere tint blauw (bijv. bg-blue-900);
  5. Wanneer de knop is uitgeschakeld, moet deze 50% transparant zijn en een cursor tonen die aangeeft dat deze niet klikbaar is.
index.html

index.html

copy
  • Gebruik hover:bg-blue-700 voor de hover-toestand;
  • Gebruik focus:bg-yellow-500 voor de focus-toestand;
  • Gebruik active:bg-blue-900 voor de actieve toestand;
  • Gebruik opacity-50 cursor-not-allowed voor de uitgeschakelde toestand.
index.html

index.html

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

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

Suggested prompts:

Can you show me the complete HTML code for the button using Tailwind CSS?

How do I make the button disabled using Tailwind classes?

Can you explain how to combine these Tailwind classes for all the required states?

Awesome!

Completion rate improved to 3.57

bookUitdaging: Stijlknoppen

Veeg om het menu te tonen

Taak

Gebruik Tailwind CSS om een knop te maken die aan de volgende eisen voldoet:

  1. De knop moet een blauwe achtergrond hebben (bijv. bg-blue-500);
  2. Wanneer er over de knop wordt gehoverd, moet de achtergrondkleur veranderen naar een donkerdere tint blauw (bijv. bg-blue-700);
  3. Wanneer de knop gefocust is, moet de achtergrondkleur geel zijn (bijv. bg-yellow-500);
  4. Wanneer de knop actief is (ingedrukt), moet de achtergrondkleur veranderen naar een nog donkerdere tint blauw (bijv. bg-blue-900);
  5. Wanneer de knop is uitgeschakeld, moet deze 50% transparant zijn en een cursor tonen die aangeeft dat deze niet klikbaar is.
index.html

index.html

copy
  • Gebruik hover:bg-blue-700 voor de hover-toestand;
  • Gebruik focus:bg-yellow-500 voor de focus-toestand;
  • Gebruik active:bg-blue-900 voor de actieve toestand;
  • Gebruik opacity-50 cursor-not-allowed voor de uitgeschakelde toestand.
index.html

index.html

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2
some-alt