Trick # 471 | Dieser Beitrag beinhaltet 487 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Weitere Informationen auf Ihren Seiten und in Ihren Beiträgen zu verlinken, ist bestimmt eine gute Idee. Richtig auffällig wird der Link aber erst dann, wenn Sie ihn als Button darstellen. Geht ganz einfach.
Zunächst erstellen Sie einen normalen Textlink innerhalb einer Seite oder eines Beitrags. Etwa so:
<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-1». 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-1 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: 0;
border: 2px solid #59B14B;
font-size: initial !important;
color: #fff !important;
background-color: #59B14B;
transition: 0.3s;
}
@media (min-width: 981px) {
.cta-styling-1 a:hover {
opacity: 1 !important;
border: 2px solid #293280;
color: #293280 !important;
background-color: transparent;
}
}Der Code ergibt folgende Darstellung. Bewegen Sie den Mauszeiger über den Button – so sehen Sie den Effekt:
Die Farben, Schriftgrössen, Abstände etc. lassen sich innerhalb des CSS-Blocks natürlich frei anpassen.
Werbung
Werbung
