Trick # 468 | Dieser Beitrag beinhaltet 482 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Animierte Farbverläufe sind ein echter Eyecatcher – genau das soll der Handlungsaufruf ja auch sein. Wie Sie beim Hovern einen hübschen Farbeffekt hinzaubern, erfahren Sie heute.
Ein simpler Textlink ist die Grundlage für diesen Hack:
<a href="https://ihredomain.ch/pfad-zum-inhalt/">Ihr Linktext</a>Vergeben Sie dem Textmodul ausserdem eine CSS-Klasse. In unserem Fall wäre es «cta-styling-4». Diese Klasse können Sie im Tab «Erweitert» des Textmoduls unter «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» einfügen.
Nun können Sie den folgenden CSS-Block kopieren und ihn in das CSS-Stylesheet Ihrer Website (im Backend unter Design/Customizer/Zusätzliches CSS einfügen:
.cta-styling-4 a {
line-height: 9px;
font-weight: 600;
padding: 18px 16px !important;
text-transform: uppercase;
display: block;
padding-left: 32px !important;
padding-right: 32px !important;
text-align: center;
border-radius: 50px;
font-size: initial !important;
color: #fff !important;
background-size: 200% auto;
background-image: linear-gradient( to right, #293280 0%, #59B14B 51%, #293280 100% );
transition: 0.3s;
}
@media (min-width: 981px) {
.cta-styling-4 a:hover {
color: #fff !important;
background-position: right center;
}
}Der Code ergibt folgende Darstellung. Bewegen Sie den Mauszeiger über den Button – so sehen Sie den Effekt:
Et voilà. Spielen Sie mit den Farbtönen und Schriftauszeichnungen im CSS-Code, um einen massgeschneiderten Button zu erhalten.
Werbung
Werbung
