Lesefortschritt:

3D-Effekt für den Divi-Button

26. Juli 2023 | CSS-Stylesheet, Divi-Theme

Trick # 260 | Dieser Beitrag beinhaltet 306 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Mit einem ganz einfachen Trick kann der Button im Divi-Theme mit einem sanften 3D-Effekt versehen werden. Bewegt man dann die Maus über die Schaltfläche wird diese (mit Schein) etwas angehoben.

Den folgenden Code speichern Sie im CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS:

.et_pb_button:hover {
 transform:scale(1.02) translateY(-3px);
 box-shadow:1px 10px 25px -10px rgba(0,0,0,0.3);
}

Das Ergebnis zeigt sich dann so:

Spielen Sie im CSS-Code vor allem mit den Werten aus der Zeile 2. Dort können Sie die Verschiebung des Buttons und dessen Skalierung beeinflussen.

Werbung

«Back to top»-Button im Divi-Theme stylen

Im Divi-Theme lässt sich ein «Back to top»-Button anzeigen. Wenn man auf einer Seite hinunterscrollt wird dieser Button unten rechts angezeigt und ermöglicht es BesucherInnen, mit einem Klick wieder bis ganz nach oben zu scrollen. Ein nettes ...

Werbung

 

Pin It on Pinterest

Share This