3 kreative Elementor-Button-Designs, die deine Website aufwerten
Manchmal sind es die kleinen Details, die aus einer Website ein echtes Erlebnis machen. Vor allem Buttons verdienen mehr Aufmerksamkeit – schließlich sind sie das Tor zu deinen wichtigsten Conversions. In diesem Tutorial zeige ich dir, wie du mit Elementor drei außergewöhnliche Button-Designs umsetzt, die garantiert auffallen.
Ich stelle dir drei Design-Varianten vor:
Gold-Button mit Hintergrundbild
Button mit Hover-Shine-Effekt
Animierter Rahmen-Button
Vorbereitung: Elementor Pro oder Custom CSS Plugin
Bevor wir starten, ein kurzer Hinweis:
Für diese Designs benötigst du Elementor Pro, da du dort direkt im Widget CSS hinzufügen kannst. Alternativ kannst du auch mit einem Custom CSS Plugin arbeiten, wenn du die kostenlose Version von Elementor nutzt.
So fügst du benutzerdefiniertes CSS in Elementor hinzu:
- Öffne die Seite mit deinem gewünschten Button.
- Wähle den Button aus und klicke auf den Reiter Erweitert.
- Scrolle nach unten zu Benutzerdefiniertes CSS.
- Füge dort den jeweiligen CSS-Code ein.
1. Edler Gold-Button mit Hintergrundbild
Warum Gold?
Gold steht für Wertigkeit, Luxus und Exklusivität. Mit diesem Button hebst du gezielt deine wichtigsten Call-to-Actions hervor – sei es für ein Premium-Angebot, eine Anmeldung oder einen Kauf.
Design-Tipp:
Das Gold in diesem Beispiel wird nicht über eine einfache Farbe erzeugt, sondern durch ein Hintergrundbild mit Goldstruktur. Dadurch wirkt der Button deutlich hochwertiger und bekommt eine schöne Textur. Natürlich kannst du jedes Hintergrundbild deiner Wahl einfügen.
So geht’s:
- Erstelle einen Standard-Button in Elementor.
- Lade ein Gold-Textur-Bild in die Medienbibliothek und verwende die URL als Hintergrundbild im „Eigenes CSS“-Code im Button Element (siehe unten).
- Optional: Verleihe dem Button abgerundete Ecken und einen leichten Schatten, um die Tiefe zu verstärken.
💡 Profi-Tipp:
Achte auf die Dateigröße deines Hintergrundbildes! Eine gute Balance zwischen Qualität und Ladezeit ist entscheidend für die Performance deiner Seite. Verwende am besten Fotos im webp oder avif-Format.
selector a{
background: url('https://www.webamaze.de/wp-content/uploads/2025/04/Gold-Background.webp');
}
2. Glänzender Shine-Effekt beim Hover
Warum Shine?
Der Shine-Effekt sorgt für Bewegung und zieht die Aufmerksamkeit deiner Besucher:innen genau im richtigen Moment auf deine Call-to-Actions. Besonders wirkungsvoll ist dieser Effekt auf Buttons in monochromen oder minimalistischen Layouts.
Design-Tipp:
Kombiniere diesen Effekt mit einem cleanen, modernen Button-Design – so kommt das Shine-Highlight besonders zur Geltung.
So geht’s:
- Lege zuerst ein schlichtes Grunddesign für deinen Button fest.
- Füge den CSS-Code für den Shine-Effekt hinzu.
- Optional: Spiele mit der Richtung des Shine-Effekts, je nach Layout.
🎨 Gestaltungs-Idee:
Nutze diesen Effekt eher sparsamer! Er wirkt am besten, wenn er nur auf besonders wichtige Buttons angewendet wird, wie z.B. auf den „Jetzt kaufen“- oder „Kostenlose Beratung“-Button.
/* Basis-Button-Container */
selector {
position: relative; /* Ermöglicht das Positionieren des Shine-Elements innerhalb des Buttons */
overflow: hidden; /* Verhindert, dass der Shine-Effekt über den Button hinaus sichtbar ist */
}
/* Shine-Element: wird als Pseudo-Element vor dem Button hinzugefügt */
selector::before {
content: ""; /* Erzeugt ein leeres Pseudo-Element */
position: absolute;
top: 0;
left: -150%; /* Startposition weit außerhalb des sichtbaren Bereichs */
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2); /* Helle, halbtransparente Fläche für Glanz */
transform: skewX(-30deg); /* Neigung für den dynamischen "Shine"-Look */
transition: all 0.5s ease; /* Weiche Animation */
pointer-events: none; /* Sicherstellen, dass der Shine-Effekt keine Klicks blockiert */
}
/* Shine-Animation beim Hover */
selector:hover::before {
left: 150%; /* Bewegt den Shine von ganz links nach ganz rechts */
}
3. Versetzter Rahmen mit eleganter Animation
Das ist das komplexeste Design, da es ausschließlich über HTML und CSS gelöst wird und du das Styling direkt im Code anpassen musst.
Warum ein animierter Rahmen?
Mit diesem Design bekommt dein Button eine subtile, aber wirkungsvolle Bewegung. Der versetzte Rahmen bewegt sich beim Hover und vermittelt Dynamik, ohne dabei aufdringlich zu wirken.
Design-Tipp:
Ideal für Seiten mit einem modernen, geometrischen Look. Der Effekt funktioniert sowohl mit klaren Linien als auch mit verspielten Layouts.
So geht’s:
- Hier nimmst du NICHT das Standard Button Element sondern fügst das HTML-Element hinzu.
- In das HTML Element fügst du den unterstehenden HTML & CSS Code untereinander hinzu.
- Im Code kannst du dann die Farben, den Button-Text und den Link austauschen. Ich habe dir im Code kommentiert, wo du was ändern kannst.
HTML Code
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<!-- Der Button-Link -->
<a href="#" class="button-3 nav-link">
<div class="bottom"></div>
<div class="top">
<!-- Text des Buttons -->
<div class="label">Zeig mir mehr!</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
CSS Code
<style>
.button-3 {
display: inline-block;
text-decoration: none;
position: relative;
}
.button-3 .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #FFD204; /* Hintergrundfarbe */
display: block;
transition: all 0.15s ease-out;
}
.button-3 .top {
position: relative;
width: 100%;
height: 100%;
padding: 19px 24px 17px 24px;
border: 2px solid #042035;
}
/* Text im Button */
.button-3 .top .label {
font-weight: 600;
color: #042035;
font-size: 16px;
line-height: 110%;
text-align: center;
text-transform: uppercase;
transition: all 0.15s ease-out;
}
/* Hover-Effekt: Hintergrund verschiebt sich auf "Bottom" */
.button-3:hover .bottom {
left: 0;
top: 0;
background-color: #042035; /* Farbe beim Hover */
}
/* Hover-Effekt: Textfarbe ändert sich */
.button-3:hover .top .label {
color: #ffffff;
}
/* Rahmen-Styling */
.button-border {
position: absolute;
background-color: #ffffff;
transition: all 0.25s ease-out;
}
/* Rahmen-Animation beim Hover (links & rechts) */
.button-3:hover .top .button-border-left,
.button-3:hover .top .button-border-right {
height: calc(100% + 2px);
}
/* Rahmen-Animation beim Hover (oben & unten) */
.button-3:hover .top .button-border-top,
.button-3:hover .top .button-border-bottom {
width: calc(100% + 2px);
}
/* Positionierung des linken Rahmens */
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
/* Positionierung des oberen Rahmens */
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
/* Positionierung des rechten Rahmens */
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
/* Positionierung des unteren Rahmens */
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}
</style>
Deine Website verdient besondere Buttons
Ob eleganter Gold-Button, auffälliger Shine-Effekt oder animierter Rahmen – mit diesen drei Designs bringst du Bewegung und Stil in deine Website. Deine Besucher:innen werden es bemerken, und Google übrigens auch: Individualisierte, ansprechende Elemente tragen zur Verweildauer und Interaktion auf deiner Seite bei. Das sind wertvolle Signale für dein SEO-Ranking.
Schnell-Check: Welcher Button passt zu dir?
| Button-Design | Ideal für | Wirkung |
|---|---|---|
| Gold-Button | Premium-Angebote, exklusive Aktionen | Elegant, luxuriös |
| Shine-Effekt | Call-to-Action-Buttons | Dynamisch, aufmerksamkeitsstark |
| Animierter Rahmen | Modernes Webdesign, minimalistische Layouts | Subtil, hochwertig |
Wenn du möchtest, kannst du die Effekte auch miteinander kombinieren oder für andere Elemente wie Links oder Call-to-Action-Bereiche verwenden.
Und wenn du individuelle Unterstützung brauchst:
💡 Ich helfe dir gerne, besondere Designs für deine Website zu entwickeln!
