Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning: Styla Knappar | Bygga Grundläggande Komponenter
Tailwind CSS för webbutveckling

bookUtmaning: Styla Knappar

Uppgift

Använd Tailwind CSS för att skapa en knapp som uppfyller följande krav:

  1. Knappen ska ha en blå bakgrund (t.ex. bg-blue-500);
  2. Vid hovring ska bakgrundsfärgen ändras till en mörkare nyans av blått (t.ex. bg-blue-700);
  3. Vid fokus ska knappen ha en gul bakgrundsfärg (t.ex. bg-yellow-500);
  4. Vid aktivt läge (nedtryckt) ska bakgrundsfärgen ändras till en ännu mörkare nyans av blått (t.ex. bg-blue-900);
  5. När knappen är inaktiverad ska den visas med 50% opacitet och en markör som indikerar att den inte är klickbar.
index.html

index.html

copy
  • Använd hover:bg-blue-700 för hovringstillstånd;
  • Använd focus:bg-yellow-500 för fokustillstånd;
  • Använd active:bg-blue-900 för aktivt tillstånd;
  • Använd opacity-50 cursor-not-allowed för inaktiverat tillstånd.
index.html

index.html

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 2

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

bookUtmaning: Styla Knappar

Svep för att visa menyn

Uppgift

Använd Tailwind CSS för att skapa en knapp som uppfyller följande krav:

  1. Knappen ska ha en blå bakgrund (t.ex. bg-blue-500);
  2. Vid hovring ska bakgrundsfärgen ändras till en mörkare nyans av blått (t.ex. bg-blue-700);
  3. Vid fokus ska knappen ha en gul bakgrundsfärg (t.ex. bg-yellow-500);
  4. Vid aktivt läge (nedtryckt) ska bakgrundsfärgen ändras till en ännu mörkare nyans av blått (t.ex. bg-blue-900);
  5. När knappen är inaktiverad ska den visas med 50% opacitet och en markör som indikerar att den inte är klickbar.
index.html

index.html

copy
  • Använd hover:bg-blue-700 för hovringstillstånd;
  • Använd focus:bg-yellow-500 för fokustillstånd;
  • Använd active:bg-blue-900 för aktivt tillstånd;
  • Använd opacity-50 cursor-not-allowed för inaktiverat tillstånd.
index.html

index.html

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 2
some-alt