Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Schaltflächen Gestalten | Grundlegende Komponenten Erstellen
Tailwind CSS für Webentwicklung

bookHerausforderung: Schaltflächen Gestalten

Aufgabe

Mit Tailwind CSS eine Schaltfläche erstellen, die folgende Anforderungen erfüllt:

  1. Die Schaltfläche soll einen blauen Hintergrund haben (z. B. bg-blue-500);
  2. Beim Überfahren mit der Maus soll sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z. B. bg-blue-700);
  3. Beim Fokus soll die Schaltfläche eine gelbe Hintergrundfarbe erhalten (z. B. bg-yellow-500);
  4. Beim Aktivieren (gedrückt) soll sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z. B. bg-blue-900);
  5. Im deaktivierten Zustand soll die Schaltfläche mit 50% Deckkraft und einem Cursor angezeigt werden, der signalisiert, dass sie nicht anklickbar ist.
index.html

index.html

copy
  • Verwenden von hover:bg-blue-700 für den Hover-Zustand;
  • Verwenden von focus:bg-yellow-500 für den Fokus-Zustand;
  • Verwenden von active:bg-blue-900 für den aktiven Zustand;
  • Verwenden von opacity-50 cursor-not-allowed für den deaktivierten Zustand.
index.html

index.html

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

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

bookHerausforderung: Schaltflächen Gestalten

Swipe um das Menü anzuzeigen

Aufgabe

Mit Tailwind CSS eine Schaltfläche erstellen, die folgende Anforderungen erfüllt:

  1. Die Schaltfläche soll einen blauen Hintergrund haben (z. B. bg-blue-500);
  2. Beim Überfahren mit der Maus soll sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z. B. bg-blue-700);
  3. Beim Fokus soll die Schaltfläche eine gelbe Hintergrundfarbe erhalten (z. B. bg-yellow-500);
  4. Beim Aktivieren (gedrückt) soll sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z. B. bg-blue-900);
  5. Im deaktivierten Zustand soll die Schaltfläche mit 50% Deckkraft und einem Cursor angezeigt werden, der signalisiert, dass sie nicht anklickbar ist.
index.html

index.html

copy
  • Verwenden von hover:bg-blue-700 für den Hover-Zustand;
  • Verwenden von focus:bg-yellow-500 für den Fokus-Zustand;
  • Verwenden von active:bg-blue-900 für den aktiven Zustand;
  • Verwenden von opacity-50 cursor-not-allowed für den deaktivierten Zustand.
index.html

index.html

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 2
some-alt