Trick # 469 | Dieser Beitrag beinhaltet 563 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Teil 3 unseres «Call-To-Action»-Specials: Der Link, der zu einem Hover-Button mitsamt Icon wird. Augenfällig und gefällig.
Auch dafür benötigen Sie zunächst einen einfachen Textlink:
<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-3». 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:
/* Icon-Styling */
.cta-styling-3 a:before {
content: "\e07e";
color: #293280;
font-family: "ETmodules";
font-size: 18px;
line-height: 1;
position: absolute;
left: 15%;
top: 35%;
}
.cta-styling-3 a:hover:before {
color: #fff;
}
/* Button-Styling */
.cta-styling-3 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;
border: 2px solid #59B14B;
font-size: initial !important;
color: #59B14B !important;
background-color: transparent;
transition: 0.3s;
}
@media (min-width: 981px) {
.cta-styling-3 a:hover {
opacity: 1 !important;
border: 2px solid #293280;
color: #fff !important;
background-color: #293280;
}
}Der Code ergibt folgende Darstellung. Bewegen Sie den Mauszeiger über den Button – so sehen Sie den Effekt:
Die Farben lassen sich im Code an verschiedenen Stellen anpassen. Das Icon ist aus der Bibliothek der Divi-Icons – Sie können ein anderes wählen (etwa unter diesem Link) und es auf Zeile 3 des CSS-Codes definieren.
Werbung
Werbung
