Trick # 470 | Dieser Beitrag beinhaltet 581 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
In unserer kleinen «Call-To-Action»-Reihe haben wir eine weitere Gestaltungsidee: Den diagonal abgeschrägten Button, der beim Hovern gerade Kanten erhält. Ist ganz einfach zu machen.
Auch hier: Text-Modul auf der Divi-Seite einfügen und einen Textlink anlegen:
<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-2». 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-2 {
background-color: #293280;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
transition: 0.3s all ease;
}
.cta-styling-2 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: 0;
font-size: initial !important;
color: #fff !important;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}
@media (min-width: 981px) {
.cta-styling-2:hover {
background-color: #59B14B;
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
}
.cta-styling-2 a:hover {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 1 !important;
color: #fff !important;
}
}Der Code ergibt folgende Darstellung. Bewegen Sie den Mauszeiger über den Button – so sehen Sie den Effekt:
Auch in diesem CSS-Block lassen sich natürlich allerhand Anpassungen machen. Feel free.
Werbung
Werbung
