Schaltflächen

Buttons sind grundlegende interaktive Elemente im Webdesign. Tailwind CSS bietet eine Vielzahl von Utilities, um Buttons effektiv zu stylen und ihre verschiedenen Zustände wie Hover, Focus und Active zu verwalten.

Grundlegende Button-Styling

Um einen grundlegenden Button zu stylen, können Sie Utilities für Hintergrundfarbe, Textfarbe, Polsterung, Border-Radius und Schriftgewicht verwenden.

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 vertikalen Abstand hinzu (0,5rem oder 8px);
5. px-4: Fügt horizontalen Abstand hinzu (1rem oder 16px);
6. rounded: Fügt kleine abgerundete Ecken hinzu.

Hover-Zustand

Um das Erscheinungsbild eines Buttons zu ändern, wenn der Benutzer mit der Maus darüberfährt, können Sie das Präfix hover: mit jeder Utility-Klasse verwenden.

hover:bg-blue-700: Ändert die Hintergrundfarbe in ein dunkles Blau, wenn der Button mit der Maus überfahren wird.

Fokuszustand

Um einen Button zu stylen, wenn er fokussiert ist (z.B. wenn er über die Tastatur ausgewählt wird), können Sie das Präfix focus: mit jeder Utility-Klasse verwenden.

In diesem Beispiel, wenn Sie den Mauszeiger über einen Button bewegen, ändert er sich zu Blau. Wenn Sie die Tab-Taste verwenden, wird der Button rot.

Aktive und deaktivierte Zustände

Aktive und deaktivierte Zustände werden seltener verwendet. Dennoch sollten wir sie ebenfalls berücksichtigen.

Um einen Button zu stylen, wenn er aktiv ist (z.B. wenn er angeklickt wird), können Sie das Präfix active: mit jeder Utility-Klasse verwenden.

Um einen Button zu stylen, wenn er deaktiviert ist (z.B. wenn er nicht interagiert werden kann), können Sie das Präfix disabled: mit jeder Utility-Klasse verwenden.

Erklärung

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

Beispiel aller Zustände

Kombinieren aller Zustände in einem Beispiel

Erklärung

1. bg-blue-500: Setzt die Standard-Hintergrundfarbe;
2. hover:bg-blue-700: Ändert die Hintergrundfarbe beim Hover;
3. focus:outline-none: Entfernt den Standard-Fokusrahmen;
4. focus:ring-2: Fügt einen Fokusring mit einer Breite von 2 Pixeln hinzu;
5. focus:ring-blue-600: Setzt die Farbe des Fokusrings;
6. focus:ring-opacity-50: Setzt die Deckkraft des Fokusrings;
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 Abstand hinzu;
11. px-4: Fügt horizontalen Abstand hinzu;
12. rounded: Fügt kleine abgerundete Ecken hinzu.

Hinweis

Wenn Sie tiefer in die Tailwind Button-Komponente eintauchen müssen, finden Sie hier einen Link zur offiziellen Dokumentation.