CSS-Schaltflächengenerator

Erstelle eine beschriftete Schaltfläche mit HTML und CSS. Bearbeite Form und Farben, prüfe das native Element oder einen simulierten Zustand und kopiere den Code.

Vorschau

Große Schatten können in der Vorschau abgeschnitten werden; das kopierte CSS bleibt unverändert.

Schaltfläche und Zustände

Gib wörtlichen Text und eine Klasse ein. Bearbeite jeden exportierten Zustand.

Schaltflächentext

Klasse

Schriftart

Schriftgröße (px)

12–32 px

Schriftstärke

Innenabstand horizontal (px)

0–64 px

Innenabstand vertikal (px)

0–32 px

Rahmenbreite (px)

0–8 px

Eckenradius (px)

0–64 px

Zu bearbeitender Zustand

Hintergrund

Text

Rahmen

Schatten verwenden

Gemeinsamer Schatten

Horizontaler Versatz (px)

-32–32 px

Vertikaler Versatz (px)

-32–32 px

Weichzeichnung (px)

0–48 px

Ausbreitung (px)

-16–16 px

Schattenfarbe

Schaltfläche deaktiviert exportieren

Schaltflächencode

Die exportierte Schaltfläche ist aktiviert.

Vorschaumodus

Vorschauhintergrund

Normal: 5,17:1 Erfüllt Referenzwert 4.5:1

Maus darüber: 6,70:1 Erfüllt Referenzwert 4.5:1

Gedrückt: 8,72:1 Erfüllt Referenzwert 4.5:1

Deaktiviert: 3,90:1 Inaktive Steuerelemente sind von dieser Textkontrastanforderung ausgenommen.

Fokusring gegenüber dem Vorschauhintergrund: 5,17:1

Der Referenzwert setzt 16 px und Schriftstärke 600 voraus; Ziel 4.5:1.

Für den Ring gilt ein Referenzwert von 3:1 gegenüber dem gewählten Hintergrund.

Farbkontrastwerte zertifizieren keine Barrierefreiheit. Prüfe Tastaturfokus, umgebende Stile und tatsächliche Nutzung.

Zustand und Kontrast

Vordergrund #FFFFFF auf Hintergrund #2563EB.

Relative Leuchtdichten: Vordergrund 1.000000, Hintergrund 0.153152.

(heller + 0,05) / (dunkler + 0,05) = 5,17:1.

Der Referenzwert setzt 16 px und Schriftstärke 600 voraus; Ziel 4.5:1.

Gedrückt überschreibt Hover; focus-visible ergänzt einen unabhängigen Ring.

Der angezeigte Wert ist gerundet; der Vergleich verwendet den ungerundeten Wert.

HTML

<button type="button" class="generated-button" dir="auto">Änderungen speichern</button>

CSS

button.generated-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid #2563EB;
  border-radius: 8px;
  background-color: #2563EB;
  background-image: none;
  color: #FFFFFF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

button.generated-button:hover:not(:disabled) {
  background-color: #1D4ED8;
  color: #FFFFFF;
  border-color: #1D4ED8;
  box-shadow: none;
}

button.generated-button:active:not(:disabled) {
  background-color: #1E40AF;
  color: #FFFFFF;
  border-color: #1E40AF;
  box-shadow: none;
}

button.generated-button:focus-visible:not(:disabled) {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

button.generated-button:disabled {
  background-color: #E5E7EB;
  color: #6B7280;
  border-color: #9CA3AF;
  box-shadow: none;
  cursor: default;
}

Text und Stile bleiben in diesem Browser; das Kopieren erfolgt ausdrücklich.

Gestalten, prüfen und kopieren

Gib wörtlichen Text und eine zulässige Klasse ein. Wähle Schrift, Größe, Stärke, Innenabstand und Rahmen.
Bearbeite Farben und Schatten der Zustände. Fokus ändert nur den Ring. Wähle, ob die exportierte Schaltfläche deaktiviert ist.
Prüfe den echten Fokus mit Live und Tab. Beachte die Kontrastwerte und kopiere HTML und CSS getrennt.

Native Semantik und Zustände

Das HTML enthält eine native Schaltfläche mit type="button", Klasse und wörtlichem Text. Eine Aktion ist nicht enthalten; füge sie in deiner Anwendung hinzu.

Maus darüber und Gedrückt können gleichzeitig gelten. Gedrückt folgt danach und setzt alle Eigenschaften zurück, auch einen fehlenden Schatten. Fokus ergänzt einen unabhängigen Ring.

Das Attribut disabled deaktiviert die Schaltfläche tatsächlich; eine graue Farbe allein genügt nicht. Die übrigen Bedienelemente bleiben nutzbar.

Eine eingeschränkte Klasse hält HTML und Selektoren synchron. Leerzeichen, Punkte, Kommas und Pseudoklassen werden abgelehnt.

Beispiele für Text und Kontrast

<Entwurf> speichern & "senden" 🚀 bleibt wörtlicher Text. HTML maskiert die Zeichen, sodass kein zusätzliches Element entsteht.

Das Beispiel verwendet bei Mausberührung dunkleres Blau mit Schatten und beim Drücken wieder Blau ohne Schatten.

Schwarz auf Weiß hat den Kontrast 21:1, gleiche Farben 1:1. Die Grenzwerte hängen von Größe und Stärke ab und werden ungerundet verglichen.

Grenzen von Gestaltung und Barrierefreiheit

Das Werkzeug bietet deckende Vollfarben, eine gemeinsame Schattenform und Systemschriften. Es erzeugt keine Verläufe, Animationen oder Aktionen.

Simulierte Zustände testen keinen Tastaturfokus. Nutze Live; ein abgeschnittener Schatten verändert das kopierte CSS nicht.

Kontrast und Mindestgröße von 44 Pixeln zertifizieren keine Barrierefreiheit. Prüfe Kontext, Tastatur und assistive Technologien.

Stile, Breite und Schriften der Zielseite können das Ergebnis beeinflussen. Der Vorschauhintergrund wird nicht exportiert; deaktivierter Text ist ausgenommen.

Lokale Bearbeitung

Das Werkzeug lädt keine Eingaben hoch und erstellt weder Verlauf noch Links mit Werten oder externe Schriftanfragen. Kopieren erfolgt ausdrücklich. Website-Dienste und Erweiterungen sind unabhängig.

Fragen zu Schaltflächen

Gedrückt folgt auf Hover und definiert die gesamte Oberfläche. Der focus-visible-Ring bleibt unabhängig.

Nein. Die Vorschau ist inaktiv. Prüfe den nativen Fokus mit Live und Tab.

Nein. Das native Attribut disabled bestimmt das Verhalten, nicht die Farbe.

Nein. Gib eine Klasse mit höchstens 48 Zeichen ein, beginnend mit einem ASCII-Buchstaben, gefolgt von Buchstaben, Ziffern, Binde- oder Unterstrichen.

Der Text bleibt wörtlich. Zeichen werden im HTML maskiert; Elemente und Ereignisbehandler werden nicht eingefügt.

Nein. Die Werte betreffen deckende sRGB-Farben und Schriftannahmen; sie zertifizieren weder Fokus noch Tastaturbedienung.

Jeder Zustand wählt seinen Schatten. Ist er bei Gedrückt aus, gibt das CSS none aus, auch wenn Hover einen Schatten hat.

Es entstehen weder Verlauf noch Links mit Daten. Die Zwischenablage erhält nur den ausdrücklich gewählten Code.

Quellen

Standards und Hinweise zu nativen Schaltflächen und ihren Zuständen.

Geprüft am 13. November 2026.

Der Generator akzeptiert eine eingeschränkte Grammatik, nicht jedes gültige CSS.

SVG in PNG

Wandle eine lokale SVG-Datei oder eingefügten Code in PNG um, mit festgelegten Abmessungen, Transparenz und mitgelieferten Schriften.

Werkzeug öffnen — SVG in PNG

CSS-Filter-Generator

Ordne und wiederhole CSS-Effekte, vergleiche ein Beispiel und kopiere die genaue Deklaration.

Werkzeug öffnen — CSS-Filter-Generator

Rechner für fließende Schriftgrößen

Legen Sie Schriftgrößen für zwei Ansichtsbreiten fest. Kopieren Sie das CSS mit wurzelbezogenen Einheiten und prüfen Sie das Modell anhand derselben ausgegebenen Koeffizienten.

Werkzeug öffnen — Rechner für fließende Schriftgrößen

CSS-Border-Radius-Generator

Bearbeite acht Eckradien, prüfe die Vorschau und kopiere CSS in Pixeln oder Prozent.

Werkzeug öffnen — CSS-Border-Radius-Generator

CSS-Grid-Generator

Erstelle ein CSS-Grid-Beispiel mit Tracks, Platzierung und benannten Bereichen. Vorschau ansehen, CSS oder HTML kopieren und das vollständige Beispiel herunterladen.

Werkzeug öffnen — CSS-Grid-Generator

CSS-Flexbox-Generator

Erstellen Sie ein Flexbox-Beispiel mit Container- und Elementsteuerelementen, expliziten Layoutachsen, passendem CSS und HTML und einem lokalen vollständigen Beispiel-Download.

Werkzeug öffnen — CSS-Flexbox-Generator

CSS-Textschatten-Generator

Erstelle geordnete Textschatten, prüfe einfachen Text und kopiere exaktes CSS.

Werkzeug öffnen — CSS-Textschatten-Generator

CSS Transformationsgenerator

Erstellen Sie wiederholbare 2D-CSS-Transformationen, bearbeiten Sie px oder prozentuale Übersetzung und Ursprung, überprüfen Sie eine Referenzbox und kopieren Sie die genauen aktuellen Deklarationen.

Werkzeug öffnen — CSS Transformationsgenerator

CSS-Boxschatten-Generator

Erstellen Sie geordnete box-shadow-Ebenen, betrachten Sie die Vorschau und kopieren Sie den CSS-Code.

Werkzeug öffnen — CSS-Boxschatten-Generator

Bild-Wasserzeichen

Fügen Sie Bildern Text oder ein Logo hinzu, prüfen Sie die Ergebnisse und laden Sie einzelne Dateien oder eine ZIP-Datei herunter.

Werkzeug öffnen — Bild-Wasserzeichen

CSS-Verlaufsgenerator

Erstellen Sie lineare oder radiale Verläufe mit einstellbaren Farben, Deckkraft und Farbpunkten.

Werkzeug öffnen — CSS-Verlaufsgenerator

Farbkonverter

Konvertiere unterstützte sRGB-HEX-, RGB- und HSL-Werte mit Alpha und ausgewiesener Genauigkeit.

Werkzeug öffnen — Farbkonverter

Bild in Text (OCR)

Erkenne gedruckten Text aus lokalen PNG- oder JPEG-Bildern, wähle die Sprache und prüfe oder korrigiere das Ergebnis vor dem Kopieren oder Herunterladen.

Werkzeug öffnen — Bild in Text (OCR)

QR-Code aus Bild lesen

Lesen Sie einen QR-Code aus einem lokalen PNG oder JPEG und prüfen Sie Text oder Bytes, ohne Links zu öffnen.

Werkzeug öffnen — QR-Code aus Bild lesen

Farbkontrast prüfen

Vergleiche Vordergrund- und Hintergrundfarben, ändere die Deckkraft und prüfe numerische WCAG-Kontrastwerte für Text und wichtige Oberflächendetails.

Werkzeug öffnen — Farbkontrast prüfen

Rechner für Druckgröße und Auflösung

Berechnen Sie Druckgröße, benötigte Pixel und effektive PPI beim Einpassen oder Beschneiden.

Werkzeug öffnen — Rechner für Druckgröße und Auflösung

Seitenverhältnis-Rechner

Berechne das Verhältnis von Breite zu Höhe oder neue Pixelmaße anhand einer vorgegebenen Seite.

Werkzeug öffnen — Seitenverhältnis-Rechner

Bilder komprimieren

Versuche, JPEG, PNG oder WebP auf eine Zieldateigröße zu bringen – mit gemessenem Ergebnis und optional kleineren Abmessungen.

Werkzeug öffnen — Bilder komprimieren

HEIC in JPG

Wandle unterstützte HEIC-Fotos lokal in JPG-Dateien mit voller Auflösung um, wähle Qualität und Hintergrund und lade geprüfte Ergebnisse einzeln oder als ZIP herunter.

Werkzeug öffnen — HEIC in JPG

Bildkonverter

Wandle PNG-, JPEG- und WebP-Bilder lokal um, stelle Transparenz, Hintergrund und Qualität ein und lade die Ergebnisse herunter.

Werkzeug öffnen — Bildkonverter

Fotocollage erstellen

Ordne lokale Fotos in einem Raster an und lade ein PNG oder JPEG herunter.

Werkzeug öffnen — Fotocollage erstellen

Bilder drehen und spiegeln

Drehe oder spiegle einen lokalen Stapel statischer PNG-, JPEG- und WebP-Bilder und lade die geprüften Ergebnisse herunter.

Werkzeug öffnen — Bilder drehen und spiegeln

Bild zuschneiden

Schneide ein lokales JPEG-, PNG- oder WebP-Bild pixelgenau zu und lade es als PNG oder JPEG herunter.

Werkzeug öffnen — Bild zuschneiden

Bildgröße ändern

Ändere die Größe eines JPG-, PNG- oder WebP-Bildes nach Pixeln oder Prozent, prüfe die Vorschau und lade es herunter.

Werkzeug öffnen — Bildgröße ändern

Alle Werkzeuge dieser Kategorie anzeigen