Elementor Button’s

Mit einer CSS-Klasse den Style eines Buttons verändern.

Oft bracht es für eine Webseite mehrere Button Styles. Leider kann man in den globalen Einstellungen von Elementor nur einen Style festlegen.

Ich habe nun zwei CSS-Klassen erstellt, die einen Ghost-Button und einen Link-Button erzeugen.
Diese CSS-Code-Blöcke schreibst du in die «Custom CSS» von Elementor Pro. Falls du keine Pro-Lizenz von Elementor hast, kannst du es auch mit dem Plugin «Code Snippets» einpflegen.
Button-Widget auf der Seite platzieren und die CSS-Klasse vergeben.
Nun kannst du ein normales Button-Widget auf der Seite platzieren und im Reiter “Advanced” die CSS-Klasse ghost_btn oder link_btn (ohne vorangehenden Punkt) ergänzen und schon hast du den gewünschten Button.

Ghost-Button (CSS-Code)

.ghost_btn .elementor-button {
   background-color: transparent;
   border-color: var(--e-global-color-accent);
   color: var(--e-global-color-accent);
}
.ghost_btn .elementor-button:hover {
   background-color: var(--e-global-color-accent);
   border-color: var(--e-global-color-accent);
   color: var(--e-global-color-secondary);
}

Zeile 10:

Um die helle Schriftfarbe vom normalen Button und den Hover-Effekt des Ghost-Buttons zu erstellen nutze ich meistens die Globale Farbe «Secondary», welche ich auf eine sehr helle Farbe einstelle.

Das hat den Vorteil, dass ich die Elementor-Templates einfach zwischen verschiedenen Webseiten kopieren kann, ohne mir Gedanken über die Farben der Elemente zu machen. Das funktioniert nur mit den vordefinierten globalen Farben, darum verwende ich für helle Elemente die globale Farbe «Secondary».

Ist das für dich zu kompliziert, dann verwende einfach eine Farbe deiner Wahl. z.B. “weiss” color: #fff; oder “blau” color: blue;

Link-Button (CSS-Code)

.link_btn .elementor-button {
   color: var(--e-global-color-accent);
   text-decoration: underline;
   background-color: transparent;
   border-color: transparent;
}
.link_btn .elementor-button:hover {
   color: var(--e-global-color-accent);
   text-decoration: none;
   background-color: transparent;
   border-color: transparent;
}

Quelle: gere.ch/elementor-buttons

Über mich

Gere Maurer
Als gelernter Elektroniker ist Programmieren keine Fremdsprache für mich. Webseiten erstelle ich aber lieber mit WordPress und dem Page Builder „Elementor“. Dabei ist mir wichtig, soviel wie nötig zu automatisieren. Die Webseiten-Betreiber sollen sich um den Inhalt und nicht um die Technik kümmern müssen. Meine Leidenschaft ist die 360° Fotografie. Hochauflösende 360° Panoramabilder, virtuelle Rundgänge für Google My Business oder eigene kleine Welten „Little Planet“ erschaffen.
Alle Beiträge ansehen