Erstellen Sie CSS-Buttons, ein Detail nach dem anderen.
Gestalten Sie einen Button visuell und erhalten Sie HTML und CSS, um ihn auf Ihrer Website zu verwenden. Beginnen Sie mit einer Vorlage, passen Sie Typografie, Farben, Form und Schatten an und sehen Sie sich die Interaktionszustände vor dem Exportieren in der Vorschau an.
Wählen Sie einen AusgangspunktMachen Sie es zu Ihrem eigenen
Durchsuchen Sie 44-Vorlagen aus den Kollektionen Everyday, Classic, Shaped, Expressive, Gradients und Elite. Jede Vorlage ist ein Ausgangspunkt, den Sie bearbeiten können.
Wie sich Vorlagen auf Ihr Design auswirken
Erst auswählen, dann feinabstimmen
Verwenden Sie die Stil-Kollektion, um die Galerie einzugrenzen. Das Anwenden einer Vorlage ersetzt sowohl Standard- als auch Hover-Stile, während Ihr Button-Text und Klassenname erhalten bleiben.
Probieren Sie eine einfache Volltonfüllung, eine abgerundete Ecke, eine klare Kontur oder eine dekorativere Gestaltung aus. Sobald Sie eine Richtung gefunden haben, verwenden Sie die anderen Registerkarten, um die Details an Ihre Seite anzupassen.
Sorgen Sie für das richtige Label
Legen Sie Button-Text, Schriftfamilie, Größe, Stärke, Abstände, Zeilenhöhe, Ausrichtung und Textfarbe fest. Sehen Sie, wie sich das Label während der Arbeit aktualisiert.
Text und Abstände feinabstimmen
Typografie, die zur Aktion passt
Text enthält die Schriftsteuerungen und ein zweites Button-Textfeld. Die Schriftgröße reicht von 10 bis 80 px; die aufgeführten Familien verwenden Schriften, die auf dem Gerät des Besuchers verfügbar sind.
Verwenden Sie ein kurzes Label, das die Aktion beschreibt. Unter Füllung fügen horizontale und vertikale Abstände Platz um den Text hinzu, ohne die Schriftgröße zu ändern. Überprüfen Sie längere Labels auf der Seite, auf der der Button verwendet werden soll.
Wählen Sie eine Vollton- oder Verlaufsfüllung
Verwenden Sie eine Hintergrundfarbe oder mischen Sie zwei Farben mit einem linearen Verlauf. Farbwähler und Hex-Eingaben ermöglichen Ihnen visuelles oder präzises Arbeiten.
Farben und Verlaufsrichtung festlegen
Zwei Farben, eine klare Richtung
Ändern Sie unter Füllung den Füllstil auf Linearer Verlauf, um die Zweite Farbe und den Verlaufswinkel anzuzeigen. Der Winkel reicht von 0 bis 360 Grad.
Hex-Felder akzeptieren eine vollständige sechsstellige Farbe oder eine dreistellige Kurzform. Testen Sie das weiße oder farbige Label gegen beide Enden eines Verlaufs; das Studio zertifiziert den Textkontrast nicht automatisch.
Kontur und Tiefe steuern
Passen Sie verknüpfte oder unabhängige Ecken, Rahmenbreite und -stil, Box-Schatten und Text-Schatten an. Geben Sie dem Button eine Form, die zu seinem Kontext passt.
Ecken, Rahmen und Schatten erkunden
Vom klaren Rechteck zur weichen Pille
Lassen Sie unter Form Alle Ecken verknüpfen aktiviert für einen gemeinsamen Radius oder deaktivieren Sie es, um jede Ecke einzeln festzulegen. Rahmenstile umfassen durchgezogen, gestrichelt, gepunktet, doppelt, inset, outset, ridge, groove und keine.
Legen Sie unter Schatten horizontale und vertikale Offsets, Weichzeichnung, Farbe und Deckkraft fest. Box-Schatten hat auch eine Ausbreitung und einen Inset-Schalter. Text-Schatten ist separat, sodass Sie dem Label Tiefe verleihen können, ohne die Button-Kontur zu ändern.
Gestalten Sie auch die Interaktion
Bearbeiten Sie Standard- und Hover-Stile separat. Sehen Sie sich die Erscheinungsbilder für Standard, Hover und Aktiv in der Vorschau an und vergleichen Sie den Button auf hellen und dunklen Hintergründen.
Bearbeitungs- und Vorschaustatus verstehen
Zwei bearbeitbare Stile, drei Vorschaustatus
Der Bearbeitungsstatus wählt aus, welchen Stil Ihre Steuerelemente ändern. Die Canvas-Status-Buttons wählen nur die Vorschau aus. Das Bewegen der Maus über die Vorschau oder das Drücken zeigt ebenfalls die Interaktion.
Hover-Werte, die noch mit dem Standard übereinstimmen, folgen Basisänderungen, bis sie angepasst werden. Der exportierte CSS enthält bei Bedarf eine Hover-Regel, eine focus-visible-Kontur, eine aktive Bewegung und eine Regel für reduzierte Bewegung.
Bringen Sie den CSS in Ihr Projekt
Kopieren Sie den generierten CSS und den passenden HTML-Button oder laden Sie ein Stylesheet herunter. Ein Klassenname hält die beiden Teile verbunden.
Kopieren, herunterladen und Ihre Arbeit behalten
Einfacher Code, den Sie direkt verwenden können
Wählen Sie einen unverwechselbaren Klassennamen, kopieren Sie CSS aus der entsprechenden Registerkarte und kopieren Sie dann den Button aus HTML. Download speichert eine .css-Datei, die nach der Klasse benannt ist; es wird keine vollständige Webseite heruntergeladen.
Vorschau und Code-Generierung laufen in Ihrem Browser. Das Studio versucht, einen Entwurf im lokalen Speicher dieses Browsers zu behalten; exportieren Sie alles, was Sie behalten möchten. Zurücksetzen bringt das Studio auf seinen Ausgangsstil zurück.
Text und Stile rein. HTML und CSS raus.
Es ist kein Upload erforderlich. JavaScript betreibt den Live-Editor in Ihrem Browser. Kopieren Sie HTML und CSS separat oder laden Sie das CSS-Stylesheet herunter. Der generierte Font-Stack verwendet Schriften, die auf dem Gerät des Betrachters verfügbar sind.
