Wie kann ich meinen Button anpassen?

Ein ansprechender und auffälliger Button kann dazu beitragen, dass Benutzer die gewünschte Aktion, wie beispielsweise eine Anmeldung oder einen Kauf, schneller und einfacher ausführen. Daher kann es hilfreich sein, den Style eines Buttons zu optimieren. In dieser Anleitung zeigen wir Ihnen, wie Sie den Style eines Buttons anpassen können.

1. Klicken Sie in der Navigationsleiste auf Style
2. Wählen Sie den zu bearbeitenden Style aus
3. Klicken Sie im Menü links auf die Rubrik Buttons
4. Klicken Sie auf das zu bearbeitenden Button, um das Fenster Edit Buttons zu öffnen oder wählen Sie im Dreipunkte Menü des jeweiligen Buttons den Punkt Bearbeiten aus

Schriftformat

Sie können für Ihren Button eine Schrift verwenden, die in der Rubrik "Fonts" definiert ist. Als grundlegende Schrift für Buttons steht Ihnen die Schriftart "button" zur Verfügung. Falls Sie andere Schriftarten benötigen, können Sie diese ebenfalls in Ihrem Style anlegen.

1. Klicken Sie auf das Feld Schriftformat
2. Wählen Sie im Dropdown Menü Ihr gewünschtes Schriftformat, durch einen Klick aus

Hover-Effekte und Disabled-Buttons

Hover-Effekte für Buttons können verwendet werden, um dem Nutzer ein visuelles Feedback zu geben, wenn er mit dem Mauszeiger über einen Button fährt. Dies kann beispielsweise durch eine Änderung der Farbe, des Hintergrunds oder anderer visueller Elemente geschehen. 

1. Mit einem Klick auf den Tab Hover öffnen Sie die Einstellungsmöglichkeiten für den Hoffer-Effekt
2. Passen Sie den Hover-Button nach belieben an

Der Disabled-Button wird in der Regel visuell anders dargestellt als ein aktiver Button. Dies kann durch eine blassere oder ausgegraute Darstellung erfolgen, um anzuzeigen, dass der Button derzeit nicht aktiv ist und nicht angeklickt werden kann. Disabled Buttons werden z. B. verwendet wenn bestimmte Bedingungen noch nicht erfüllt sind, wie bei fehlenden Angaben im Formular.

1. Mit einem Klick auf den Tab Disabled öffnen Sie die Einstellungsmöglichkeiten für den Disabled-Button
2. Passen Sie den Diabled-Button nach belieben an

Farben im Button

Wählen Sie eine passende Schriftfarbe für Ihren Button aus, die sich gut von der Hintergrundfarbe des Buttons abhebt, um eine klare Lesbarkeit zu gewährleisten.

1. Klicken Sie auf das Feld Font color
2. Wählen Sie eine beliebige Farbe aus

Wählen Sie eine passende Hintergrundfarbe für Ihren Button aus

1. Klicken Sie auf das Feld Background color
2. Wählen Sie eine beliebige Farbe aus

Innenabstand

Der Abstand zwischen dem Text oder Inhalt eines Buttons zum Rand des Buttons, kann mit dem Padding definiert werden.

1. Klicken Sie in das Eingabefeld der jeweiligen Abstandsrichtung:
   1. Padding top (Innenabstand nach oben)
   2. Padding bottom (Innenabstand nach unten)
   3. Padding left (Innenabstand nach links)
   4. Padding right (Innenabstand nach rechts)
2. Geben Sie den gewünschten Abstand ein z. B. 10px

Kantenradius 

Mit dem Border Radius kann festgelegt werden, wie Stark die Ecken eines Buttons abgerundet oder eckig sein sollen. Ein höherer Wert führt zu stärker abgerundeten Ecken, während ein Wert von 0px eckige Kanten erzeugt.

1. Klicken Sie in das Eingabefeld des jeweiligen Kantenradius:
   1. Top left: Kante oben links
   2. Top right: Kante oben rechts
   3. Bottom right: Kante unten rechts
   4. Bottom left: Kante unten links
2. Geben Sie den gewünschten Radius ein z. B. 10px für leicht abgerundete Kanten

Rahmen

Sie können Ihrem Button einen Rand hinzufügen und diesem verschiedene Eigenschaften wie Farbe, Dicke und Stil des Randes geben.

1. Klicken Sie in das Feld Border width, um die Dicke des Rahmens einzugeben z. B. 1px
2. Wählen Sie unter Border color die Farbe aus, die der Rahmen haben soll
3. Wählen Sie die Kanten aus, an denen ein Rahmen dargestellt werden soll 
   1. Border top (Rahmen oben)
   2. Border bottom (Rahmen untern)
   3. Border left (Rahmen links)
   4. Border right (Rahmen rechts)
4. Wählen Sie den Stildes Rahmens für die jeweilige Kante aus
   1. Keiner (Keinen Rahmen)
   2. Durchgängig
   3. Gepunktet 
   4. Gestrichelt

Speichern

Nachdem Sie alle gewünschten Einstellungen vorgenommen haben, vergessen Sie bitte nicht, auf den Speichern-Button zu klicken. Beachten Sie, dass alle Änderungen verloren gehen, wenn Sie das Fenster schließen, ohne auf den "Speichern"-Button zu klicken.

Das könnte Sie auch Interessieren