Aussehen einer Schaltfläche einstellen

Jede Schaltfläche auf deiner Website kann ihre eigene Farbe, Form und Größe bekommen. Du stellst hier ein, wie sie aussieht – unabhängig davon, wozu sie dient.

Voraussetzungen

Du bearbeitest gerade einen Abschnitt, der eine Schaltfläche enthält, etwa einen Aufruf zum Handeln, ein Kontaktformular oder ein Produkt-Trio.

So gehst du vor

1. Klicke auf die Schaltfläche, um das Fenster zu öffnen. Ein Vorschautext „Aa" zeigt dir sofort, wie die aktuelle Gestaltung wirkt.

2. Wähle die Art der Schaltfläche:

   • Primär: die Haupt-Schaltfläche mit Farbfläche
   • Sekundär: mit farbigem Umriss, nicht gefüllt
   • Link: nur Text und Symbol, keine Fläche
   • Ghost: unsichtbar, bis man mit der Maus darüber fährt

3. Stelle die Farbe der Fläche oder die Farbe von Schrift und Umriss ein (je nach Art). Die Schrift stellt sich automatisch so ein, dass sie lesbar bleibt. Wenn dein Abschnitt dieselbe Farbe hat, hebt sich die Schaltfläche nicht ab – das ist oft gewünscht.

4. Wähle die Form: scharf, leicht gerundet oder sehr rund.

5. Bestimme die Größe: klein, normal oder groß.

6. Vergib ein Symbol (Icon), falls die Schaltfläche einen visuellen Zusatz brauchen soll. Leer lassen ist genauso möglich.

7. Wenn du ein Symbol gewählt hast, stelle die Lage des Symbols ein:

   • Davor: Icon links, dann Text
   • Danach: Text links, dann Icon
   • Nur Symbol: nur das Icon wird angezeigt, der Text bleibt für Vorleseprogramme erhalten

8. Für feinere Anpassungen klicke auf Feinheiten:

   • Schrift: normal, Großbuchstaben oder Fettdruck
   • Schatten: keine, leicht oder kräftig (falls die Art es erlaubt)
   • Beim Überfahren: wie sich die Schaltfläche anfühlt, wenn man mit der Maus darüber fährt
   • Breite: nur so breit wie der Inhalt, oder volle Breite des verfügbaren Platzes

9. Wenn die Schaltfläche auf eine externe Adresse verlinkt, kannst du unten die Option In neuem Fenster öffnen aktivieren. Für interne Links stellst du das beim Ziel selbst ein.

10. Klicke Fertig, um das Fenster zu schließen. Die Vorschau zeigt die Schaltfläche auf heller Fläche – wie sie wirklich im Abschnitt wirkt, siehst du im Blatt nebenan.

Aufbau des Fensters

Vorschaubereich oben: Hier siehst du die Schaltfläche immer so, wie sie auf heller Fläche aussieht. Das hilft beim Gestalten, ist aber nicht das endgültige Bild – dafür ist die Vorschau zuständig.

Einstellungen je nach Art: Manche Schaltflächenarten haben keine Farbfläche, sondern nur Schrift und Umriss. Darum ändert sich, welche Farb-Einstellung dir angeboten wird.

Hinweis bei „Nur Symbol": Wenn die Schaltfläche nur das Icon zeigt, bleibt der Text für Vorleseprogramme erhalten – er wird nur nicht angezeigt.

Feinheiten: Der Bereich ist versteckt, lässt sich aber aufklappen. Hier landen Einstellungen, die nur Experten interessieren.

Aussehen zurücksetzen: Diese Schaltfläche entfernt alle Anpassungen und stellt die Voreinstellung wieder her – aber nur, wenn du hier wirklich etwas geändert hast.

Was danach passiert

Deine Änderungen werden sofort gespeichert. Die Schaltfläche sieht ab jetzt so aus, wie du sie eingestellt hast – auf allen Geräten und überall auf der Website, wo diese Schaltfläche erscheint.

Tipps und Hinweise

• Der Kontrast-Hinweis beim Ändern der Farbe gilt nur für helle Flächen. Wenn dein Abschnitt farbig oder dunkel ist, schau dir die Schaltfläche in der Vorschau an.

• Eine ältere Schaltflächenart wird für dich beibehalten, solange du sie nicht änderst. Wenn du auf Auf Standard setzen klickst, wechselt sie zu den neuen Stilen – die Farbe passt sich dann an die Farbstimmung des Abschnitts an.

• Manche Einstellungen gehören zur ganzen Website: Die Option „Wie die Website" folgt den Angaben im Design unter „Schaltflächen".