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

bookHerausforderung: Schaltflächen

Aufgabe

Verwenden Sie Tailwind CSS, um eine Schaltfläche zu erstellen, die die folgenden Anforderungen erfüllt:

  1. Die Schaltfläche sollte einen blauen Hintergrund haben (z.B. bg-blue-500);
  2. Beim Überfahren mit der Maus sollte sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z.B. bg-blue-700);
  3. Wenn sie fokussiert ist, sollte die Schaltfläche eine gelbe Hintergrundfarbe haben (z.B. bg-yellow-500);
  4. Wenn sie aktiv (gedrückt) ist, sollte sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z.B. bg-blue-900);
  5. Wenn sie deaktiviert ist, sollte die Schaltfläche mit 50% Deckkraft erscheinen und einen Cursor haben, der anzeigt, dass sie nicht anklickbar ist.
index.html

index.html

copy
  • Verwenden Sie hover:bg-blue-700 für den Hover-Zustand;
  • Verwenden Sie focus:bg-yellow-500 für den Fokus-Zustand;
  • Verwenden Sie active:bg-blue-900 für den aktiven Zustand;
  • Verwenden Sie 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

Awesome!

Completion rate improved to 3.57

bookHerausforderung: Schaltflächen

Swipe um das Menü anzuzeigen

Aufgabe

Verwenden Sie Tailwind CSS, um eine Schaltfläche zu erstellen, die die folgenden Anforderungen erfüllt:

  1. Die Schaltfläche sollte einen blauen Hintergrund haben (z.B. bg-blue-500);
  2. Beim Überfahren mit der Maus sollte sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z.B. bg-blue-700);
  3. Wenn sie fokussiert ist, sollte die Schaltfläche eine gelbe Hintergrundfarbe haben (z.B. bg-yellow-500);
  4. Wenn sie aktiv (gedrückt) ist, sollte sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z.B. bg-blue-900);
  5. Wenn sie deaktiviert ist, sollte die Schaltfläche mit 50% Deckkraft erscheinen und einen Cursor haben, der anzeigt, dass sie nicht anklickbar ist.
index.html

index.html

copy
  • Verwenden Sie hover:bg-blue-700 für den Hover-Zustand;
  • Verwenden Sie focus:bg-yellow-500 für den Fokus-Zustand;
  • Verwenden Sie active:bg-blue-900 für den aktiven Zustand;
  • Verwenden Sie 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