Trick # 562 | Dieser Beitrag beinhaltet 509 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Ein schwebender Call-to-Action-Button (CTA) ist ein effektives Mittel, um wichtige Aktionen hervorzuheben und User gezielt zu lenken. Ob für Kontaktanfragen, Newsletter-Anmeldungen oder Produktseiten – ein immer sichtbarer Button steigert die Klickrate und sorgt für Aufmerksamkeit.
Der Trick ist recht einfach. Das Resultat sehen Sie ganz unten rechts in diesem Beitrag: ein sanft pulsierender und schwebender Call-to-action-Button.
Wechseln Sie in Ihrem Editor in die HTML-Ansicht und geben Sie folgenden Code ein:
<div class="floating-cta">
<a href="https://domain.com/page/" class="cta-button">Jetzt Kontakt aufnehmen</a>
</div>Auf Zeile 2 müssen Sie natürlich einen sinnvollen Text eingeben – und die richtige URL.
Nun kommt etwas CSS-Code hinzu. Unten ein Beispiel wie Sie es in das CSS-Stylesheet Ihrer Website einfügen können. Im WordPress-Backend geht das über Design/Customizer/Zusätzliches CSS:
.floating-cta {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
animation: pulse 2s infinite;
z-index: 1;
}.cta-button {
background-color: #ff6a00;
color: #fff;
padding: 15px 25px;
border-radius: 30px;
font-size: 16px;
text-decoration: none;
font-weight: bold;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}.cta-button:hover {
background-color: #ff4500;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}Sie können freilich alles mögliche anpasdsen. Zum Beispiel die Farbwerte auf den Zeilen 11 und 23 und vieles mehr.
Werbung
Werbung
