Anwendungsgebiet

Wichtige Links, mit denen nicht nur Querverbindungen hergestellt, sondern weitere Nutzeraktionen ausgelöst werden sollen, lassen sich durch Button-Links hervorheben. Wegen ihres optischen Gewichts sollten sie aber mit Bedacht eingesetzt werden.

Button-Links reagieren außerdem weniger flexibel als verlinkter Text und sollten deshalb eher griffige, kurze Beschriftungen haben. Beschriftungen wie "hier", "mehr" oder "weiter" geben dem Besucher keinen guten Anhaltspunkt, warum dort geklickt werden sollte. Lange Beschriftungen hingegen können auf Mobilgeräten umbrechen und sehr unleserlich sein.

Generell sollen auf diese Art Seiten verlinkt werden, aber keine Dateien. Für letztere steht das Element "Downloads und Links" zur Verfügung. Damit lassen sich übrigens auch Listen von Links übersichtlich darstellen.

Button-Links können in verschiedenen Höhen und Breiten erzeugt werden. Die Auswahl der Größe sollte immer im Verhältnis zu den benachbarten Elementen gewählt werden: Große Bilder lassen sich gut mit großen Buttons kombinieren, kleine Textabschnitte vertragen nur kleine Buttons. Die Breite sollte mit der Breite anderer Elemente korrespondieren und ein geschlossenes Bild erzeugen. Buttons, die über die gesamte Seitenbreite laufen, sollten vermieden werden.

Wenn Buttons in Widgets eingefügt werden, passt sich die Hintergrundfarbe des Buttons an die Farbe des Widgets an.

Erstellung

Um einen Button-Link zu erstellen, klicken Sie an der gewünschten Stelle auf das Plus-Symbol, um den Content-Assistent aufzurufen. Auf dem Reiter "MDK" befindet sich das Element "Button Link". Ein Klick darauf führt zu einer neuen Maske für die Optionen des Buttons.

Zu Beginn kann eine Überschrift vergeben werden. Diese Überschrift erscheint außerhalb der Box und ist für die Besucher der Website nicht sinnvoll. Vergeben Sie aber dennoch einen Titel und stellen Sie den Typ auf "Verborgen", um das Backend übersichtlich zu halten.

Wählen Sie darunter – mit einem Klick auf das Ketten-Symbol – zunächst das Link-Ziel des Buttons aus. Dann geben Sie bei "Linktext" die Beschriftung des Buttons an. Im Feld "Größe" können Sie zwischen normaler Höhe und größerer Höhe (lg) wählen.

Um die Breite eines Buttons nicht durch seine Textlänge, sondern durch den zur Verfügung stehenden Platz bestimmen zu lassen, aktivieren Sie "Zeige Button über gesamte Breite".

Je nach Kontext kann es nötig sein, dem Element Abstände nach oben oder unten hinzuzufügen. Klicken Sie dazu auf den Reiter "Erscheinungsbild" und wählen Sie aus den Feldern "Space Before" bzw. "Space after".