Herausforderung: Schaltflächen
Aufgabe
Verwenden Sie Tailwind CSS, um eine Schaltfläche zu erstellen, die die folgenden Anforderungen erfüllt:
- Die Schaltfläche sollte einen blauen Hintergrund haben (z.B.
bg-blue-500
); - Beim Überfahren mit der Maus sollte sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z.B.
bg-blue-700
); - Wenn sie fokussiert ist, sollte die Schaltfläche eine gelbe Hintergrundfarbe haben (z.B.
bg-yellow-500
); - Wenn sie aktiv (gedrückt) ist, sollte sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z.B.
bg-blue-900
); - 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
- 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
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 2
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 3.57
Herausforderung: Schaltflächen
Swipe um das Menü anzuzeigen
Aufgabe
Verwenden Sie Tailwind CSS, um eine Schaltfläche zu erstellen, die die folgenden Anforderungen erfüllt:
- Die Schaltfläche sollte einen blauen Hintergrund haben (z.B.
bg-blue-500
); - Beim Überfahren mit der Maus sollte sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z.B.
bg-blue-700
); - Wenn sie fokussiert ist, sollte die Schaltfläche eine gelbe Hintergrundfarbe haben (z.B.
bg-yellow-500
); - Wenn sie aktiv (gedrückt) ist, sollte sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z.B.
bg-blue-900
); - 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
- 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
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 2