Lädt...

CSS Buttons

Buttons sind die „Tu das“-Steuerelemente — senden, speichern, weiter. CSS kann ihnen eine klare Oberfläche und ehrliches Feedback geben, wenn jemand hovert, drückt, fokussiert oder sie deaktiviert findet. Halten Sie HTML semantisch (button oder Submit-Input); diese Lektion geht um Aussehen und Zustände.

Ein Button-Werkzeugkasten

📊 Buttons auf einen Blick

Teil Alltagaufgabe
padding + background + border Eine solide, lesbare Button-Fläche bauen
border-radius Ecken weicher machen (oder mit großem Radius zur Pille)
:hover / :active „Ich bin interaktiv“ und „Ich bin gedrückt“ zeigen
:focus-visible Tastatur-Fokusring sichtbar halten
:disabled + cursor Nicht verfügbare Buttons abdämpfen; Handzeiger wenn klickbar

Gestalten Sie eine gemeinsame .btn (oder button), damit Primäraktionen auf der Seite zusammenpassen. Feld-Padding für Texteingaben war die vorige Lektion — hier kleiden wir die Klickziele.

Ein solider Primärbutton

Beginnen Sie mit komfortablem Padding, klarem Hintergrund, lesbarer Textfarbe und ruhigem border-radius. Nutzen Sie font: inherit, damit der Button zum umgebenden Text passt.

Basis-Primärbutton

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover und Active — ehrliches Feedback

:hover kann die Fläche leicht dunkler oder heller machen. :active soll sich gedrückt anfühlen — eine Nuance dunkler oder eine winzige Verschiebung — kein brandneues Neon-Theme.

Hover und Active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Fokus, den man sieht

Entfernen Sie Fokusstile nie ohne Ersatz. :focus-visible zeichnet einen klaren Ring für Tastatur Nutzer und hält Mausklicks ruhig.

Sichtbarer Fokusring

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Deaktivierte Buttons bleiben sichtbar

Ein disabled Button soll nicht verfügbar wirken — geringere Opacity oder gedämpfte Farben — und den Handzeiger ablehnen. Verstecken Sie ihn nicht aus dem Layout.

Disabled-Ton

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

Eine ruhige Button-Gewohnheit

Halten Sie eine Primärhaut, klares Hover/Active, einen sichtbaren Fokusring und gedämpftes Disabled. Outline-/Ghost-Varianten können dasselbe Padding und denselben Radius teilen, damit das Set verwandt wirkt.

Outline-Begleiter

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

Selbst ausprobieren

  1. Gestalten Sie einen Primär-button mit Padding, Hintergrund, Textfarbe und border-radius.
  2. Verdunkeln Sie :hover und vertiefen Sie :active leicht.
  3. Fügen Sie einen :focus-visible-Outline hinzu — kein nacktes outline: none.
  4. Dämpfen Sie einen :disabled-Button und setzen Sie cursor: not-allowed.
  5. Optional: fügen Sie ein .btn-outline-Geschwister mit gleichem Padding und Radius hinzu.

Häufige Fehler

  • outline: none ohne Fokusersatz (Tastatur Nutzer verlieren die Orientierung)
  • Winziges Padding, das mobile Tipziele verfehlt
  • Diese Lektion in Textfeld-/Textarea-Styling verwandeln (das war Formularsteuerelemente)
  • Wildes Neon-Theme bei :hover, das die Markenruhe bricht
  • Nur a-Tags stylen und echte button-Elemente vergessen

Kurzfassung

  • Padding, Hintergrund, Border und Radius bauen eine solide Button-Fläche
  • :hover und :active geben ehrliches Interaktionsfeedback
  • Halten Sie einen sichtbaren :focus-visible-Ring
  • Dämpfen Sie :disabled; nutzen Sie cursor: pointer, wenn klickbar
  • Feld-Chrome gehört zur Formular-Lektion; hier kleiden wir Klickziele

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 34 von 35
Css Tutorial