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

bookErstellen und Gestalten von Schaltflächen

Schaltflächen sind grundlegende interaktive Elemente im Webdesign. Tailwind CSS stellt eine Vielzahl von Utilities zur Verfügung, um Schaltflächen effektiv zu gestalten und deren verschiedene Zustände wie Hover, Fokus und Aktiv zu verwalten.

Grundlegende Schaltflächen-Gestaltung

Zur Gestaltung einer einfachen Schaltfläche können Utilities für Hintergrundfarbe, Textfarbe, Innenabstand, abgerundete Ecken und Schriftgewicht verwendet werden.

index.html

index.html

copy

Erklärung

  1. bg-yellow-500: Setzt die Hintergrundfarbe auf einen Blauton;
  2. text-white: Setzt die Textfarbe auf Weiß;
  3. font-bold: Macht den Text fett;
  4. py-2: Fügt vertikales Padding hinzu (0,5rem oder 8px);
  5. px-4: Fügt horizontales Padding hinzu (1rem oder 16px);
  6. rounded: Fügt kleine abgerundete Ecken hinzu.

Hover-Zustand

Um das Erscheinungsbild eines Buttons beim Überfahren mit der Maus zu ändern, kann das Präfix hover: mit jeder Utility-Klasse verwendet werden.

index.html

index.html

copy

hover:bg-blue-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus in ein dunkles Blau.

Fokus-Zustand

Um einen Button im Fokuszustand zu gestalten (z. B. wenn er über die Tastatur ausgewählt wird), kann das Präfix focus: mit jeder Utility-Klasse verwendet werden.

index.html

index.html

copy

In diesem Beispiel ändert sich die Schaltfläche beim Überfahren mit dem Mauszeiger zu Blau. Wenn die Tab-Taste verwendet wird, wird die Schaltfläche Rot.

Aktive und deaktivierte Zustände

Aktive und deaktivierte Zustände werden seltener verwendet. Dennoch sollten sie berücksichtigt werden.

Um eine Schaltfläche im aktiven Zustand (z. B. beim Klicken) zu gestalten, kann das Präfix active: mit jeder Utility-Klasse verwendet werden.

Um eine Schaltfläche im deaktivierten Zustand (z. B. wenn keine Interaktion möglich ist) zu gestalten, kann das Präfix disabled: mit jeder Utility-Klasse verwendet werden.

index.html

index.html

copy

Erklärung

  1. active:bg-green-800: Ändert die Hintergrundfarbe zu einem dunkleren Grünton, wenn die Schaltfläche aktiv (gedrückt) ist;
  2. opacity-50: Verringert die Deckkraft der Schaltfläche, um einen deaktivierten Zustand darzustellen;
  3. cursor-not-allowed: Ändert den Mauszeiger, um anzuzeigen, dass die Schaltfläche nicht anklickbar ist;
  4. disabled-Attribut: Macht die Schaltfläche nicht interaktiv.

Beispiel aller Zustände

Kombination aller Zustände in einem Beispiel

index.html

index.html

copy

Erläuterung

  1. bg-blue-500: Legt die Standard-Hintergrundfarbe fest;
  2. hover:bg-blue-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus;
  3. focus:outline-none: Entfernt die Standard-Fokus-Kontur;
  4. focus:ring-2: Fügt einen Fokus-Ring mit einer Breite von 2 Pixeln hinzu;
  5. focus:ring-blue-600: Legt die Farbe des Fokus-Rings fest;
  6. focus:ring-opacity-50: Legt die Deckkraft des Fokus-Rings fest;
  7. active:bg-blue-800: Ändert die Hintergrundfarbe, wenn die Schaltfläche aktiv ist;
  8. text-white: Setzt die Textfarbe auf Weiß;
  9. font-bold: Macht den Text fett;
  10. py-2: Fügt vertikalen Innenabstand hinzu;
  11. px-4: Fügt horizontalen Innenabstand hinzu;
  12. rounded: Fügt kleine abgerundete Ecken hinzu.

Hinweis

Wenn Sie tiefer in die Tailwind Button-Komponente einsteigen möchten, finden Sie hier einen Link zur offiziellen Dokumentation.

1. Wie ändert man die Hintergrundfarbe einer Schaltfläche, wenn sie mit der Maus überfahren wird?

2. Welche Utility-Klasse entfernt den Standard-Fokusrahmen eines Buttons?

3. Welche Utility-Klasse ändert die Hintergrundfarbe eines Buttons, wenn dieser aktiv (gedrückt) ist?

question mark

Wie ändert man die Hintergrundfarbe einer Schaltfläche, wenn sie mit der Maus überfahren wird?

Select the correct answer

question mark

Welche Utility-Klasse entfernt den Standard-Fokusrahmen eines Buttons?

Select the correct answer

question mark

Welche Utility-Klasse ändert die Hintergrundfarbe eines Buttons, wenn dieser aktiv (gedrückt) ist?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 1

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 explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookErstellen und Gestalten von Schaltflächen

Swipe um das Menü anzuzeigen

Schaltflächen sind grundlegende interaktive Elemente im Webdesign. Tailwind CSS stellt eine Vielzahl von Utilities zur Verfügung, um Schaltflächen effektiv zu gestalten und deren verschiedene Zustände wie Hover, Fokus und Aktiv zu verwalten.

Grundlegende Schaltflächen-Gestaltung

Zur Gestaltung einer einfachen Schaltfläche können Utilities für Hintergrundfarbe, Textfarbe, Innenabstand, abgerundete Ecken und Schriftgewicht verwendet werden.

index.html

index.html

copy

Erklärung

  1. bg-yellow-500: Setzt die Hintergrundfarbe auf einen Blauton;
  2. text-white: Setzt die Textfarbe auf Weiß;
  3. font-bold: Macht den Text fett;
  4. py-2: Fügt vertikales Padding hinzu (0,5rem oder 8px);
  5. px-4: Fügt horizontales Padding hinzu (1rem oder 16px);
  6. rounded: Fügt kleine abgerundete Ecken hinzu.

Hover-Zustand

Um das Erscheinungsbild eines Buttons beim Überfahren mit der Maus zu ändern, kann das Präfix hover: mit jeder Utility-Klasse verwendet werden.

index.html

index.html

copy

hover:bg-blue-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus in ein dunkles Blau.

Fokus-Zustand

Um einen Button im Fokuszustand zu gestalten (z. B. wenn er über die Tastatur ausgewählt wird), kann das Präfix focus: mit jeder Utility-Klasse verwendet werden.

index.html

index.html

copy

In diesem Beispiel ändert sich die Schaltfläche beim Überfahren mit dem Mauszeiger zu Blau. Wenn die Tab-Taste verwendet wird, wird die Schaltfläche Rot.

Aktive und deaktivierte Zustände

Aktive und deaktivierte Zustände werden seltener verwendet. Dennoch sollten sie berücksichtigt werden.

Um eine Schaltfläche im aktiven Zustand (z. B. beim Klicken) zu gestalten, kann das Präfix active: mit jeder Utility-Klasse verwendet werden.

Um eine Schaltfläche im deaktivierten Zustand (z. B. wenn keine Interaktion möglich ist) zu gestalten, kann das Präfix disabled: mit jeder Utility-Klasse verwendet werden.

index.html

index.html

copy

Erklärung

  1. active:bg-green-800: Ändert die Hintergrundfarbe zu einem dunkleren Grünton, wenn die Schaltfläche aktiv (gedrückt) ist;
  2. opacity-50: Verringert die Deckkraft der Schaltfläche, um einen deaktivierten Zustand darzustellen;
  3. cursor-not-allowed: Ändert den Mauszeiger, um anzuzeigen, dass die Schaltfläche nicht anklickbar ist;
  4. disabled-Attribut: Macht die Schaltfläche nicht interaktiv.

Beispiel aller Zustände

Kombination aller Zustände in einem Beispiel

index.html

index.html

copy

Erläuterung

  1. bg-blue-500: Legt die Standard-Hintergrundfarbe fest;
  2. hover:bg-blue-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus;
  3. focus:outline-none: Entfernt die Standard-Fokus-Kontur;
  4. focus:ring-2: Fügt einen Fokus-Ring mit einer Breite von 2 Pixeln hinzu;
  5. focus:ring-blue-600: Legt die Farbe des Fokus-Rings fest;
  6. focus:ring-opacity-50: Legt die Deckkraft des Fokus-Rings fest;
  7. active:bg-blue-800: Ändert die Hintergrundfarbe, wenn die Schaltfläche aktiv ist;
  8. text-white: Setzt die Textfarbe auf Weiß;
  9. font-bold: Macht den Text fett;
  10. py-2: Fügt vertikalen Innenabstand hinzu;
  11. px-4: Fügt horizontalen Innenabstand hinzu;
  12. rounded: Fügt kleine abgerundete Ecken hinzu.

Hinweis

Wenn Sie tiefer in die Tailwind Button-Komponente einsteigen möchten, finden Sie hier einen Link zur offiziellen Dokumentation.

1. Wie ändert man die Hintergrundfarbe einer Schaltfläche, wenn sie mit der Maus überfahren wird?

2. Welche Utility-Klasse entfernt den Standard-Fokusrahmen eines Buttons?

3. Welche Utility-Klasse ändert die Hintergrundfarbe eines Buttons, wenn dieser aktiv (gedrückt) ist?

question mark

Wie ändert man die Hintergrundfarbe einer Schaltfläche, wenn sie mit der Maus überfahren wird?

Select the correct answer

question mark

Welche Utility-Klasse entfernt den Standard-Fokusrahmen eines Buttons?

Select the correct answer

question mark

Welche Utility-Klasse ändert die Hintergrundfarbe eines Buttons, wenn dieser aktiv (gedrückt) ist?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 1
some-alt