Lesefortschritt:

Divi-Buttons unlimited: So gelingen Ihre Button-Stylings perfekt

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

Trick # 295 | Dieser Beitrag beinhaltet 9391 Wörter. – Geschätzte Lesezeit: ca. 47 Minuten.

Das Button-Modul im Divi-Theme bietet eine Fülle von Anpassungsmöglichkeiten. Sie können die Farbe, das Symbol, den Hover-Stil, die Animation und die Position ändern. Aber was, wenn Sie über das hinausgehen möchten, was Divi von Haus aus bietet? Wir zeigen Ihnen nicht weniger als 25 einfache Styling-Tricks für Ihre Divi-Buttons.

Die meisten der hier vorgestellten Effekte werden sichtbar, wenn Sie hovern – also den Mauszeiger über den Button bewegen. Alles, was Sie tun müssen, um diese Effekte zu verwenden, ist, den Code zu kopieren und im CSS-Stylesheet Ihrer Divi-Website (unter Design/Customizer/Zusätzlcihes CSS) einzufügen. Im Button-Modul müssen Sie ausserdem die entsprechende CSS-Klasse benennen.

OK. Los geht’s:

Icon-Tricks

Icon rechts

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-icon-right.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-icon-right {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-right::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  right: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-right {
  overflow: hidden;
}

Icon links

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-icon-left.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-icon-left {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-left::before {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  left: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-left:hover::before {
  left: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-left {
  overflow: hidden;
}

Icon Fade

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-icon-fade.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-icon-fade {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-icon-fade::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: var(--btn-background);
  margin: 0;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-fade:hover::after {
  opacity: 1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-fade {
  overflow: hidden;
}

Icon oben

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-icon-top.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-icon-top {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-icon-top::after {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: var(--btn-background);
  margin: 0;
  height: 100%;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-top:hover::after {
  top: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-top {
  overflow: hidden;
}

Icon unten

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-icon-bottom.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-icon-bottom {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-icon-bottom::after {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: var(--btn-background);
  margin: 0;
  height: 100%;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-bottom:hover::after {
  bottom: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-icon-bottom {
  overflow: hidden;
}

Textwechsel beim hovern

Fade

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-hover-text-fade.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-fade::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: inherit;
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: opacity .3s linear;
  content: 'Dankeschön'; /* Den Content können Sie mit Ihrem Text ersetzen. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-fade:hover::after {
  opacity: 1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-fade {
  overflow: hidden;
}

von links

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-hover-text-left.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-hover-text-left {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-left::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  left: -100%;
  width: 100%;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
  content: 'Dankeschön'; /* Den Content können Sie mit Ihrem Text ersetzen. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-left:hover::after {
  left: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-left {
  overflow: hidden;
}

von rechts

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-hover-text-right.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-hover-text-right {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-right::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  right: -100%;
  width: 100%;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
  content: 'Dankeschön'; /* Den Content können Sie mit Ihrem Text ersetzen. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-right {
  overflow: hidden;
}

von oben

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-hover-text-top.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-hover-text-top {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-top::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: -100%;
  opacity: 1;
  left: 0;
  height: 100%;
  right: 0;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
  content: 'Dankeschön'; /* Den Content können Sie mit Ihrem Text ersetzen. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-top:hover::after {
  top: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-top {
  overflow: hidden;
}

von unten

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-hover-text-bottom.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-hover-text-bottom {
  --btn-background: #59B14B; /* Diesen Farbwert können Sie passend zu Ihrem Design anpassen */
}
#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-bottom::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  bottom: -100%;
  opacity: 1;
  left: 0;
  height: 100%;
  right: 0;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
  content: 'Dankeschön'; /* Den Content können Sie mit Ihrem Text ersetzen. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-bottom:hover::after {
  bottom: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-hover-text-bottom {
  overflow: hidden;
}

Doppelte Umrandung

oben rechts

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-double-border-top-right.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-double-border-top-right {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-top-right::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-top-right:hover::after {
  top: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
}

oben links

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-double-border-top-left.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-double-border-top-left {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-top-left::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-top-left:hover::after {
  top: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
}

unten rechts

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-double-border-bottom-right.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-double-border-bottom-right {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-bottom-right::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-bottom-right:hover::after {
  top: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
}

unten links

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-double-border-bottom-left.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-double-border-bottom-left {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-bottom-left::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-bottom-left:hover::after {
  top: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
}

zentriert

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-double-border-center.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-double-border-center {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-center::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';  /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-center:hover::after {
  top: calc(var(--border-width) * (-3.5));
  right: calc(var(--border-width) * (-3.5));
  bottom: calc(var(--border-width) * (-3.5));
  left: calc(var(--border-width) * (-3.5));
}

Fade Out

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-double-border-fade-out.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-double-border-fade-out {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren. */
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-fade-out::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';  /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
  transition: all .5s ease-out;
}

#page-container .et-l .et_pb_section .et_pb_button.button-double-border-fade-out:hover::after {
  top: calc(var(--border-width) * (-6));
  right: calc(var(--border-width) * (-6));
  bottom: calc(var(--border-width) * (-6));
  left: calc(var(--border-width) * (-6));
  opacity: 0;
}

Animierte Ränder

Horizontale Ränder

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-lines-horizontal.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-lines-horizontal {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren */
  --border-color: #000 /* Hier können Sie die Farbe des Rahmens definieren */
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-horizontal::before,
#page-container .et-l .et_pb_section .et_pb_button.button-lines-horizontal::after {
  display: block !important;
  margin: 0;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: inherit;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-horizontal::before {
  top: calc(var(--border-width) * (-1));
  left: 0;
  bottom: auto;
  right: auto;
  border-bottom: none;
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-horizontal::after {
  top: auto;
  left: auto;
  bottom: calc(var(--border-width) * (-1));
  right: 0;
  border-top: none;
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-horizontal:hover::before,
#page-container .et-l .et_pb_section .et_pb_button.button-lines-horizontal:hover::after {
  width: 100%;
  opacity: 1;
}

Rand links

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-lines-left.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-lines-left {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren */
  --border-color: #000 /* Hier können Sie die Farbe des Rahmens definieren */
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-left::before {
  display: block !important;
  margin: 0;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  left: 0;
  right: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-left:hover::before {
  width: 100%;
  opacity: 1;
}

Rand rechts

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-lines-right.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-lines-right {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren */
  --border-color: #000 /* Hier können Sie die Farbe des Rahmens definieren */
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-right::before {
  display: block !important;
  margin: 0;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  right: 0;
  left: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-right:hover::before {
  width: 100%;
  opacity: 1;
}

Rand zentriert

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-lines-center.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-lines-center {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren */
  --border-color: #000 /* Hier können Sie die Farbe des Rahmens definieren */
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-center::before {
  display: block !important;
  margin: 0;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  right: 50%;
  left: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-center:hover::before {
  width: 100%;
  opacity: 1;
  right: 0;
}

Rand an Ecken

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-lines-corners.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-lines-corners {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren */
  --border-color: #000 /* Hier können Sie die Farbe des Rahmens definieren */
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-corners::before,
#page-container .et-l .et_pb_section .et_pb_button.button-lines-corners::after {
  display: block !important;
  margin: 0;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  border-radius: inherit;
  border-width: var(--border-width);
  border-color: transparent;
  border-style: solid;
  opacity: 1;
  width: 0;
  height: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-corners::before {
  top: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  bottom: auto;
  right: auto;
  border-right: none;
  border-bottom: none;
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-corners::after {
  top: auto;
  left: auto;
  bottom: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  border-left: none;
  border-top: none;
}

#page-container .et-l .et_pb_section .et_pb_button.button-lines-corners:hover::before,
#page-container .et-l .et_pb_section .et_pb_button.button-lines-corners:hover::after {
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  border-color: var(--border-color);
}

Eyecatcher

pulsieren

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-pulse.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

#page-container .et-l .et_pb_section .button-pulse {
  animation: button-pulse 1.5s infinite;
}

@keyframes button-pulse {

  0%,
  30%,
  60%,
  100% {
    transform: scale(1);
  }

  15%,
  45% {
    transform: scale(1.15);
  }
}

#page-container .et-l .et_pb_section .button-pulse:hover {
  animation: none;
}

schattiert pulsieren

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-shadow-pulse.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

#page-container .et-l .et_pb_section .button-shadow-pulse {
  animation: shadow-pulse 1s infinite;
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 #59B14B; /* Hier können Sie die Farbe der Schattierung definieren */
  }

  50% {
    box-shadow: 0 0 0 1em transparent;
  }

  100% {
    box-shadow: 0 0 transparent;
  }
}

#page-container .et-l .et_pb_section .button-shadow-pulse:hover {
  animation: none;
}

vibrieren

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-shake.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

#page-container .et-l .et_pb_section .button-shake {
  animation: button-shake 1.5s infinite;
}

@keyframes button-shake {

  10%,90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,50%,70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%,60% {
    transform: translate3d(3px, 0, 0);
  }
}

#page-container .et-l .et_pb_section .button-shake:hover {
  animation: none;
}

pulsierender Rand

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Button die CSS-Klasse button-border-pulse.

Bearbeiten Sie dafür das Button-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.button-border-pulse {
  --border-width: 2px; /* Hier können Sie die Stärke des Rahmens definieren */
  --border-color: #59B14B; /* Hier können Sie die Farbe des Rahmens definieren */
}

#page-container .et-l .et_pb_section .button-border-pulse::after {
  display: block !important;
  margin: 0;
  border: var(--border-width) solid var(--border-color);
  border-radius: inherit;
  content: ''; /* Hier könnte für das hovern ein anderer Text angegeben werden. */
  z-index: -1;
  transition: all .5s ease-out;
  animation: border-pulse 1.2s infinite;
  opacity: 1;
}

@keyframes border-pulse {

  0%,100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  50% {
    top: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    right: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    bottom: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    left: calc(var(--border-width) * (-1) - var(--border-width) * 3);
  }
}

#page-container .et-l .et_pb_section .button-border-pulse:hover::after {
  opacity: 0;
}

Divi-Module in der Sidebar verwenden

9. März 2021 Divi-Theme | Seitenleisten-Modul

Üblicherweise lassen sich nur Widgets in die Seitenleiste einer Website integrieren. Die Module des Divi-Themes lassen sich aber mit einem einfachen Trick ebenso verwenden. Das ergibt ganz neue Möglichkeiten.

Abgestempelt: Hinweis-Badge im Look & Feel eines Poststempels

21. August 2024 CSS-Stylesheet | Divi-Theme | Text-Modul

Hinweise, welche auf die Website «gestempelt» werden, sind beliebt und ein auffälliges Element dazu. Oft werden dafür Grafiken verwendet. Das ist aber gar nicht nötig - mit dem Text-Modul des Divi-Themes und etwas CSS-Code geht das ganz praktisch.

Blog-Modul-Special #2: Gesamte Beitragsvorschau im Divi-Blog-Modul verlinken

24. Dezember 2022 CSS-Stylesheet | Divi-Theme | Blog-Modul

Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem ...

Divi-Theme: Passwortgeschützte Seiten aufhübschen

27. September 2023 CSS-Stylesheet | Divi-Theme

Unter WordPress lassen sich Seiten und Beiträge passwortgeschützt veröffentlichen. Wird dann der Inhalt aufgerufen, erscheint zunächst eine Passwortabfrage, welche im Divi-Theme aber reichlich karg daher kommt. Sie lässt sich indes mit ...

Keine Inhalte gefunden.

Divi-Module

Dr.-Code-Specials

Geplante Beiträge

Child-Theme erstellen

Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.

mehr Infos

Member-Bereich

Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.

Jetzt kostenlos und spamfrei registrieren

Themenidee?

Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.

Themenvorschlag

Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.

Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.

Divi-Buttons unlimited: So gelingen Ihre Button-Stylings perfekt

Icon-Tricks

Textwechsel beim hovern

Doppelte Umrandung

Animierte Ränder

Eyecatcher

Divi-Module in der Sidebar verwenden

Abgestempelt: Hinweis-Badge im Look & Feel eines Poststempels

Blog-Modul-Special #2: Gesamte Beitragsvorschau im Divi-Blog-Modul verlinken

Divi-Theme: Passwortgeschützte Seiten aufhübschen

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Child-Theme erstellen

Member-Bereich

Themenidee?

Werbung

Pin It on Pinterest