Elementor Buttons animierst du mit ein wenig eigenem CSS. Die eingebauten Hover-Effekte von Elementor decken nur Standards wie Vergrößern oder Pulsieren ab, individuelle Animationen sind damit nicht möglich. In Elementor Pro fügst du den CSS-Code direkt am Button im Tab „Erweitert“ unter „Eigenes CSS“ ein. In diesem Beitrag findest du drei fertige Button-Animationen zum Kopieren.

Der klassische Elementor Button ist bewusst schlicht gehalten: Du kannst Farben, Schatten und Rahmen anpassen und ein paar vorgefertigte Hover-Effekte aktivieren. Damit hört der Spaß aber auch schon auf. Genau so ist dieser Beitrag entstanden: Ich wollte für ein Projekt animierte Buttons, die die Bordmittel von Elementor in keiner Weise abdecken. Die Lösung war eigenes CSS.

Deshalb zeige ich dir zuerst, wie du eigenes CSS in Elementor einfügst, mit und ohne Pro-Version. Danach stelle ich dir drei animierte Buttons vor, jeweils mit Vorschau und komplettem CSS-Code zum Kopieren. Im Video siehst du alle drei Animationen in Aktion.

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Eigenes CSS in Elementor einfügen

Mit Elementor Pro ist das Einfügen sehr komfortabel: Klicke deinen Button an, öffne den Tab „Erweitert“ und trage den Code im Abschnitt „Eigenes CSS“ ein. Dort arbeitest du mit dem Platzhalter selector. Elementor ersetzt ihn automatisch durch den CSS-Selektor genau dieses Elements. Der Code wirkt dadurch nur auf den Button, an dem du ihn hinterlegst, und nicht auf andere Buttons deiner Website. Alle drei Code-Beispiele in diesem Beitrag sind für diesen Weg geschrieben.

Du nutzt die kostenlose Version von Elementor? Dann fügst du den Code stattdessen im WordPress-Customizer unter „Design“ und „Zusätzliches CSS“ ein. Das funktioniert mit jedem klassischen WordPress-Theme, beachte dabei aber unbedingt den folgenden Hinweis.

Wichtig: Ohne Elementor Pro musst du selector ersetzen

Der Platzhalter selector funktioniert nur im Feld „Eigenes CSS“ von Elementor Pro. Im Customizer musst du ihn austauschen: Vergib deinem Button im Tab „Erweitert“ im Feld „CSS-Klassen“ einen eigenen Namen, zum Beispiel mein-button (dieses Feld gibt es auch in der kostenlosen Version). Ersetze anschließend im Code jedes selector durch .mein-button. Erst dann weiß der Browser, für welchen Button das CSS gelten soll.

Tipp: Elementor Pro

Elementor Pro bietet dir neben dem Feld „Eigenes CSS“ an jedem Element viele weitere Profi-Funktionen, zum Beispiel den Theme Builder, zusätzliche Widgets und erweiterte Formulare. Wenn du regelmäßig mit Elementor arbeitest, lohnt sich ein Blick: Hier geht es zu Elementor Pro *.

* Es handelt sich hierbei um einen Affiliate-Link.

Elementor Button animieren (1): Animierter Farbverlauf

Dieser Button hat einen animierten Farbverlauf aus vier Farben. Sobald du mit dem Mauszeiger über den Button fährst, startet die Animation und der Farbverlauf wandert durch den Button.

Meiner Meinung nach sieht dieser Button richtig gut aus. Besonders schön kommt er auf einem dunklen Website-Hintergrund (Dark-Design) zur Geltung. Die vier Farben passt du über die CSS-Variablen --grad1 bis --grad4 ganz einfach an deine Website an.

Elementor Button mit animiertem Farbverlauf

:root{
    --grad1: #03a9f4;
    --grad2: #f441a5;
    --grad3: #ffeb3b;
    --grad4: #03a9f4;
}

selector a{
    background: linear-gradient(110deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4));
    background-size: 400%;
    z-index: 1;
    position: relative;
}

selector a:hover{
    animation: animate 12s linear infinite;
}

@keyframes animate {
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}

Elementor Button animieren (2): Leuchtende Ecken mit Glow-Effekt

Dieser Button bekommt farbig leuchtende Ecken, sobald der Mauszeiger ihn berührt. Für das Leuchten sorgt ein Blur-Filter, der den Farbverlauf hinter dem Button weichzeichnet.

Farblich ist dieser Button deutlich schlichter als Button 1. Auch hier bin ich der Auffassung, dass die Farben bei einem Dark-Design am besten zur Geltung kommen. Über die CSS-Variablen am Anfang des Codes stellst du die Größe des Buttons, die Hintergrundfarbe und die beiden Verlaufsfarben ein.

Elementor Button mit leuchtenden Ecken (Glow-Effekt)

selector{
    --btn-width: 180px;
    --btn-height: 50px;
    --btn-background: #1C3161;
    --left-gradient: #F803F8;
    --right-gradient: #03F2FD;
}

selector a {
  position: relative;
  width: var(--btn-width);
  height: var(--btn-height);
}

selector a:before,
selector a:after {
  content: '';
  position: absolute;
  inset: 0;
  transition: 0.5s;
}

selector a:nth-child(1):before,
selector a:nth-child(1):after {
  background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}

selector a:hover:before {
  inset: -3px;
}

selector a:hover:after {
  inset: -3px;
  filter: blur(10px);
}

selector a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-background);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

Elementor Button animieren (3): Animierte Unterstreichung

Der dritte Button ist ein schlichter Button, unter dessen Inhalt ein kurzer Strich sitzt. Fährst du mit dem Mauszeiger über den Button, wird der Strich breiter und unterstreicht den Text des Buttons.

Ein solcher Button lässt sich vielfältig einsetzen, denn der Effekt ist dezent und passt zu fast jedem Design. Ein Hinweis zur Anpassung: Der Wert top: 34px hängt von der Höhe deines Buttons ab. Sitzt der Strich nicht direkt unter dem Text, passe diesen Wert in kleinen Schritten an.

Elementor Button mit animierter Unterstreichung

selector .elementor-button-content-wrapper:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 34px;
    margin-left: 0px;
    width: 20%;
    transition: width .6s ease;
}
selector:hover  .elementor-button-content-wrapper:after{
    width: 70%;
}

Fazit: Elementor Button animieren

Mit wenigen Zeilen CSS holst du aus dem Standard-Button von Elementor deutlich mehr heraus. Die drei gezeigten Animationen kannst du direkt kopieren und über die CSS-Variablen an die Farben deiner Website anpassen. So lenkst du die Aufmerksamkeit deiner Besucher gezielt auf wichtige Aktionselemente wie „Jetzt anfragen“ oder „Termin buchen“.

Du möchtest deine Buttons und den Rest deiner Website lieber vom Profi gestalten lassen? Dann wirf einen Blick auf unser WordPress Webdesign. Gerne gestalte ich eine Website, die zu deinem Unternehmen passt.

Diese Beiträge rund um Elementor könnten dich ebenfalls interessieren: