Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Udfordring: Style Knapper | Opbygning af Grundlæggende Komponenter
Tailwind CSS til Webudvikling

bookUdfordring: Style Knapper

Opgave

Ved brug af Tailwind CSS, opret en knap der opfylder følgende krav:

  1. Knap skal have en blå baggrund (f.eks. bg-blue-500);
  2. Ved hover skal baggrundsfarven ændres til en mørkere blå nuance (f.eks. bg-blue-700);
  3. Ved fokus skal knappen have en gul baggrundsfarve (f.eks. bg-yellow-500);
  4. Ved aktiv (trykket) tilstand skal baggrundsfarven ændres til en endnu mørkere blå nuance (f.eks. bg-blue-900);
  5. Når knappen er deaktiveret, skal den vises med 50% opacitet og en cursor, der indikerer at den ikke kan klikkes på.
index.html

index.html

copy
  • Brug hover:bg-blue-700 for hover-tilstand;
  • Brug focus:bg-yellow-500 for fokus-tilstand;
  • Brug active:bg-blue-900 for aktiv tilstand;
  • Brug opacity-50 cursor-not-allowed for deaktiveret tilstand.
index.html

index.html

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

bookUdfordring: Style Knapper

Stryg for at vise menuen

Opgave

Ved brug af Tailwind CSS, opret en knap der opfylder følgende krav:

  1. Knap skal have en blå baggrund (f.eks. bg-blue-500);
  2. Ved hover skal baggrundsfarven ændres til en mørkere blå nuance (f.eks. bg-blue-700);
  3. Ved fokus skal knappen have en gul baggrundsfarve (f.eks. bg-yellow-500);
  4. Ved aktiv (trykket) tilstand skal baggrundsfarven ændres til en endnu mørkere blå nuance (f.eks. bg-blue-900);
  5. Når knappen er deaktiveret, skal den vises med 50% opacitet og en cursor, der indikerer at den ikke kan klikkes på.
index.html

index.html

copy
  • Brug hover:bg-blue-700 for hover-tilstand;
  • Brug focus:bg-yellow-500 for fokus-tilstand;
  • Brug active:bg-blue-900 for aktiv tilstand;
  • Brug opacity-50 cursor-not-allowed for deaktiveret tilstand.
index.html

index.html

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 2
some-alt