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
