Lesefortschritt:

3D-Effekt für den Divi-Button

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

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

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This