CSS-Button-Generator

Buttons gestalten: Farbe, Schrift, Padding, Radius, Rahmen, Schatten und Hover – fertiges CSS und Tailwind-Klassen kopieren.

Der CSS-Button-Generator gestaltet Buttons visuell: Farbe, Schrift, Innenabstand, Radius, Rahmen, Schatten und Hover-Zustand mit Übergang. Du siehst den Button live, kannst ihn direkt bedienen und kopierst fertiges CSS oder eine Zeile Tailwind-Klassen. Die Hover-Farbe wird auf Wunsch automatisch aus der Grundfarbe berechnet.

Beschriftung

Hintergrund

Textfarbe

Schriftgröße px

Schriftstärke

Innenabstand horizontal px

Innenabstand vertikal px

Eckenradius px

Rahmenstärke px

Schatten

Hover-Zustand

Hover-Farbe automatisch (dunkler)

Anheben px

Übergang ms

Live: fahre mit der Maus darüber oder nutze Tab.

Jetzt starten

Hover-Zustand (statisch)

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #3b82f6;
  border: 0px solid transparent;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.button:hover {
  background-color: #256cde;
  transform: translateY(-1px);
}

.button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Was gehört zu einem guten Button?

Ein Button braucht klare Beschriftung, ausreichende Größe, genug Kontrast und sichtbare Zustände: normal, Hover, Fokus und deaktiviert. Der Generator deckt Normal-, Hover- und Fokuszustand ab und liefert dafür sauberen Code.

Wichtige Einstellungen

Einstellung	Hinweis
Kontrast Text/Hintergrund	Mindestens 4,5 : 1 für normalen Text
Höhe	Für Touch etwa 44 px oder mehr
Radius	Eckig wirkt sachlich, Pille freundlich
Hover	Dezent: dunklerer Ton, leichtes Anheben

So gehst du vor

Vorlage wählen und Farben anpassen.
Kontrast mit dem Farbkontrast-Prüfer und die Größe mit dem Touch-Target-Prüfer testen.
CSS oder Tailwind kopieren.

Beispiel

Ein Primär-Button mit #3b82f6, weißer Schrift, 12 px / 24 px Innenabstand und 8 px Radius entspricht in Tailwind px-6 py-3 rounded-lg. Der Schatten stammt aus dem Box-Shadow-Generator, den Übergang stimmst du im Easing-Generator ab.

Häufige Fragen

Wie gestalte ich einen Hover-Zustand?

Mit der Pseudoklasse :hover änderst du Hintergrundfarbe und optional die Position. Ein etwas dunklerer Ton und ein Anheben um 1 bis 2 px wirken dezent. Ein Übergang (transition) von 150 ms macht die Änderung weich.

Wie groß sollte ein Button mindestens sein?

Für Touch-Bedienung mindestens etwa 44 × 44 px. Die tatsächliche Fläche prüfst du im Touch-Target-Prüfer. Die Höhe ergibt sich aus Schriftgröße und vertikalem Innenabstand.

Warum gibt es einen focus-visible-Stil?

Wer mit der Tastatur navigiert, braucht einen sichtbaren Fokusrahmen. :focus-visible zeigt ihn nur bei Tastaturbedienung und nicht bei Mausklicks. Der Code enthält deshalb einen Outline-Stil.

Sind die Tailwind-Klassen exakt dasselbe wie das CSS?

Sie erzeugen dasselbe Ergebnis. Wo ein Wert in der Standardskala liegt, nutzt der Generator die kurze Klasse wie px-6, sonst eine arbitrary value wie px-[22px]. Farben stehen als arbitrary values, damit du sie 1:1 übernimmst.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.