• Thema

  • Technologie

Elementor Button’s

Elementor Buttons auf der Webseite

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
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
gere.maurer@gmail.com
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

Schreibe einen Kommentar

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

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

    Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.