Im Bricks Builder mehrzeilige Button erstellen

Einfach und ohne zusätzlichem CSS können wir einen Button mit HTML bauen. Wir fügen ein div ein und ändern div auf das HTML Tag a.

a tag2

Die Inhalte

Nun fügen wir in das a Link Element unsere Textelemente ein, formatierter oder Standard Text und ggf. auch ein Icon.

a tag

Die Breite des Buttons ergibt sich durch den Inhalt und wir können die inneren Abstände und auch die Breite dann mit Padding anpassen. Der a Tag kann nun mit Hintergrund, ggf. Rundung und Schatten, Padding usw. gestylt werden.

Das Ganze könnte dann so aussehen. Mit etwas Flex und weiteren Containern / Divs kannst du auch das Icon rechts oder links setzen…

button fertig2

Mit dem Button Element

Wir fügen einen Button ein. Das Button Element kann generell Text und ein Icon darstellen. Das Icon liegt dabei entweder rechts oder links vom Text…

button default

Unter “Inhalt” haben wir das Texteingabe Feld. Hier können wir auch HTML eingeben, um so mehrere Zeilen zu generieren. Ich habe hier einen Beispieltext vorbereitet:

Neue Themes sind online!<br><span class="button-text">Get the full power</span>

<br> bringt den Zeilenumbruch und mit der Klasse im <span> kann ich den Text der zweiten Zeile unabhängig der oberen Zeile stylen.

button eingabefeld2

Display Block

Der Button im Bricks Builder hat standardmäßig den Wert display: flex; Damit wir sauber zwei oder mehr Zeilen untereinander bekommen, ändern wir die Anzeige in “Block”. Gerade wenn wir mit dem <span> Tag arbeiten, kann die Anzeige schon mal nebeneinander sein. Auch ein Icon wird mit “Block” unter den Text gesetzt.

anzeige block

Das CSS

Mit der CSS Klasse “button-text” können wir dann die zweite Zeile ansprechen. Das CSS können wir im Feld “Benutzerdefiniertes CSS” vom Button eingeben:

.button-text {font-size: 24px; text-transform: uppercase;} /* der Text im span */

Der Button

Den Button an sich, die Hintergründe, Rahmen, Rundung, den oberen Text usw. kannst du wie gewohnt in Bricks stylen. Mit zugewiesenen Klassen und eigenem CSS kannst du natürlich noch wesentlich mehr stylen und auch weitere Elemente erreichen.

Der Button könnte dann so aussehen.

button button2

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert