LocalToolsSammlung offline nutzbarer Browser-Tools

Kategorie: Entwicklung

CSS-Button-Generator

Eigene IdeeTool fehlt?

Baue anpassbare CSS-Buttons mit Live-Vorschau und kopierfertigem Code

Gestalte einen Button visuell und kopiere sauberes HTML und CSS. Stelle Farben, Rahmen, Radius, Abstände, Schatten sowie Hover- und Fokusstile im Browser ein.

Hover und Fokus

Vorschau

Fahre mit der Maus über die Vorschau oder erreiche sie mit der Tabulatortaste, um Hover- und Fokusstile zu sehen.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

Das Snippet nutzt ein echtes <button>-Element und behält einen sichtbaren :focus-visible-Rahmen. Diesen Rahmen zu entfernen würde Tastaturnutzenden jede Orientierung nehmen.

Vorschau und erzeugter Code entstehen beide in deinem Browser.

Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.

Wozu dieses Werkzeug dient

Das ist ein visueller Editor für einen Button: Farben, Rahmen, Radius, Innenabstände, Schriftgröße und -stärke, Schatten und was sich beim Hover ändert. Die Vorschau wird von genau dem CSS gestaltet, das du kopierst – Überfahren oder Antabben zeigt daher die echten Zustände, keine Annäherung. Zwei Dinge bleiben nicht dem Zufall überlassen. Das Markup ist ein echtes `<button type="button">`, kein gestyltes div, also von Haus aus fokussierbar und mit der Tastatur bedienbar. Und die Ausgabe behält immer einen sichtbaren `:focus-visible`-Rahmen – der häufigste Barrierefreiheitsfehler in generiertem Button-CSS ist ein `outline: none`, das Tastaturnutzende im Ungewissen lässt, wo auf der Seite sie gerade sind.

So funktioniert es

  1. Lege Beschriftung und Klassennamen fest und wähle Hintergrund-, Text- und Rahmenfarbe.
  2. Stelle Radius, Rahmenbreite, Innenabstände sowie Schriftgröße und -stärke ein, bis die Vorschau passt.
  3. Setze Hover-Hintergrund und Fokusring und kopiere HTML und CSS.

Datenschutz

Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.

Häufig gestellte Fragen

Kann ich Hover-Stile anlegen?
Ja. Hover-Hintergrund, das optionale Anheben und die Schattenänderung sind Teil des erzeugten CSS, als eigene :hover-Regel, die du danach bearbeiten kannst.
Braucht der Button JavaScript?
Nein. Die Ausgabe ist reines HTML und CSS. Skript brauchst du nur dafür, was der Button beim Klick tut.
Kann ich HTML und CSS getrennt kopieren?
Ja – beide haben eine eigene Kopierschaltfläche, du kannst das CSS also in ein Stylesheet und das Markup an seinen Platz bringen.
Warum enthält das CSS einen Fokusrahmen?
Weil ohne ihn niemand, der per Tastatur navigiert, sieht, auf welchem Element er gerade ist. Die erzeugte Regel nutzt :focus-visible, der Ring erscheint also bei Tastaturfokus, ohne bei jedem Mausklick aufzutauchen.
Ist der erzeugte Code lokal?
Ja. Alle Einstellungen, die Vorschau und die erzeugten Snippets bleiben in deinem Browser.

Zurück zu allen Werkzeugen