Dieses Beispiel verwendet nur die Steuerelemente des Generators. Die Bilder oben zeigen tatsächlich heruntergeladene Stylesheets, die auf gewöhnliche HTML-Schaltflächen angewendet wurden, keine Screenshots des Editors.
CSS-Schaltflächen-Generator öffnen
Mit Signature beginnen
Öffnen Sie den CSS-Schaltflächen-Generator. Wählen Sie unter Voreinstellungen (Presets) „Signature“ aus der Everyday-Kollektion. Legen Sie den Schaltflächentext auf „Get started“ fest. Geben Sie im Code-Bereich den Klassennamen cta-button ein.
Eine Voreinstellung ersetzt die Standard- und Hover-Stile, während Ihre Beschriftung und Ihr Klassenname erhalten bleiben. Wählen Sie Ihren Ausgangspunkt, bevor Sie detaillierte Anpassungen vornehmen.
Der Klassenname verbindet die CSS-Regeln mit Ihrer HTML-Schaltfläche. Der Generator bereinigt nicht unterstützte Zeichen; verwenden Sie einen kurzen, eindeutigen Namen, um die Gestaltung nicht zusammengehöriger Elemente zu vermeiden.
Die Pille mit Farbverlauf erstellen
Lassen Sie den Bearbeitungsstatus auf „Default“ (Standard). Wählen Sie unter Text „System sans“, Schriftgröße 18 px und Gewicht „Bold“ (Fett). Behalten Sie die weiße Textfarbe, den normalen Stil, die zentrierte Ausrichtung und die Zeilenhöhe 1.4 bei.
Wählen Sie unter „Fill“ (Füllung) „Linear gradient“ (Linearer Farbverlauf). Verwenden Sie die beiden Farben und den Winkel unten. Stellen Sie den horizontalen Innenabstand auf 32 px und den vertikalen Innenabstand auf 16 px ein. Lassen Sie unter „Shape“ (Form) „Link all corners“ (Alle Ecken verknüpfen) aktiviert und stellen Sie den Eckenradius auf 100 px ein. Die Rahmenbreite bleibt 0 px.
Lassen Sie unter „Shadow“ (Schatten) „Box shadow“ (Box-Schatten) aktiviert. Verwenden Sie den horizontalen Versatz 0 px, den vertikalen Versatz 8 px, die Unschärfe 24 px, die Ausdehnung −4 px, die Farbe #460BD8 und die Deckkraft 32%. Lassen Sie „Inset shadow“ (Innenliegender Schatten) und „Text shadow“ (Textschatten) deaktiviert.
Der Innenabstand (Padding) ändert den Raum um den Text. Der Eckenradius ändert die Kontur. Ein großer Radius erzeugt diese Pillenform, ohne die Beschriftung breiter zu machen.
Geben Sie dem Hover eine eigene Behandlung
Schalten Sie den Bearbeitungsstatus auf „Hover“. Ändern Sie unter „Fill“ die Hintergrundfarbe auf #33099E und die zweite Farbe auf #6D20BF. Behalten Sie den Winkel des Farbverlaufs bei 135° bei. Ändern Sie unter „Shadow“ den vertikalen Versatz auf 10 px und die Unschärfe auf 28 px. Lassen Sie die anderen Einstellungen unverändert.
Verwenden Sie die Schaltflächen „Default“, „Hover“ und „Active“ auf der Arbeitsfläche, um jeden Zustand zu überprüfen. Sie können auch mit der Maus über die Vorschau-Schaltfläche fahren oder diese drücken. Wechseln Sie die Arbeitsfläche zwischen hell und dunkel, um den Rand und den Schatten zu prüfen.
Der Bearbeitungsstatus wählt aus, welche Stile Sie ändern. Der Arbeitsflächenstatus ändert nur das, was Sie in der Vorschau sehen. Kehren Sie zur Standardbearbeitung zurück, bevor Sie das Erscheinungsbild im Ruhezustand anpassen.
Hover-Eigenschaften, die noch mit dem Standard übereinstimmen, folgen späteren Standardänderungen. Sobald Sie eine Hover-Eigenschaft anpassen, bleibt sie unabhängig. Überprüfen Sie beide Zustände erneut, nachdem Sie den Basisstil geändert haben.
Exportieren und auf Ihrer Seite testen
Wählen Sie den CSS-Tab und verwenden Sie „Copy CSS“ oder wählen Sie „Download“, um cta-button.css zu speichern. Wählen Sie den HTML-Tab und kopieren Sie das passende Schaltflächen-Markup. Das HTML enthält denselben Klassennamen und eine Schaltfläche mit type="button".
Fügen Sie das CSS zu Ihrem Stylesheet hinzu oder verlinken Sie die heruntergeladene Datei von Ihrer Seite aus. Platzieren Sie das HTML dort, wo die Schaltfläche hingehört. Die beiden Exporte funktionieren zusammen: Eine HTML-Schaltfläche allein enthält nicht ihr Styling.
Öffnen Sie die Seite und testen Sie den Standard-, Hover-, Tastaturfokus- und gedrückten Zustand. Der Export enthält eine focus-visible-Kontur, eine kleine aktive Bewegung und eine Regel für reduzierte Bewegung. Ihre umgebenden Stile und installierten Schriftarten können das Ergebnis weiterhin beeinflussen.
Die generierte Schaltfläche ist ein gestyltes Steuerelement. Verbinden Sie das Klickverhalten in Ihrem Projekt; verwenden Sie den korrekten Schaltflächentyp, wenn Sie sie einem Formular hinzufügen.
cta-button.css
Der heruntergeladene Dateiname folgt dem Klassennamen.
Häufige Fragen
Benötige ich ein CSS-Framework?
Nein. Die Ausgabe ist Standard-CSS plus eine einfache HTML-Schaltfläche. Fügen Sie das CSS in Ihr eigenes Stylesheet ein und verwenden Sie die passende Klasse für die Schaltfläche.
Speichert der Download auch die HTML?
Der Download speichert eine .css-Datei, die nach der Klasse benannt ist. Kopieren Sie das Schaltflächen-Markup separat vom HTML-Tab.
Kann ich jeder Ecke einen anderen Radius geben?
Ja. Deaktivieren Sie unter „Shape“ die Option „Link all corners“ und stellen Sie dann „Top left“, „Top right“, „Bottom right“ und „Bottom left“ unabhängig voneinander ein. Dieses Beispiel behält sie für eine Pillenform verknüpft bei.
Ist mein Entwurf beim nächsten Mal noch da?
Das Studio versucht, den aktuellen Entwurf im lokalen Speicher dieses Browsers zu sichern. Dies ist kein Konto- oder geräteübergreifendes Backup. Browsereinstellungen, das Löschen von Websitedaten oder das Zurücksetzen können den Entwurf entfernen oder ersetzen. Exportieren Sie daher Arbeiten, die Sie behalten möchten.
Wird mein Button auf einen Server hochgeladen?
Die Styling-Vorschau und die CSS/HTML-Generierung laufen in Ihrem Browser. Der Editor lädt weder Ihren Button-Text noch Ihren Styling-Entwurf hoch, um den Export zu erstellen.
Geben Sie Ihrem nächsten Button einen eigenen Stil.
Wählen Sie einen Ausgangspunkt, passen Sie die Details an und übernehmen Sie den Code in Ihr Projekt.