Lesefortschritt:

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

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

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;
}

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

Tipps & Tricks per Mail

Mit dem Newsletter von Dr. Code erhalten Sie sporadich die neuesten Hacks und Tricks zu CSS, Divi, Wordpress & Co. direkt in Ihr Mailpostfach.

anmelden

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.

Vorname	Nachname
Ort	Land
E-Mail-Adresse *

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

Icon-Tricks

Textwechsel beim hovern

Doppelte Umrandung

Animierte Ränder

Eyecatcher

Ähnliche Beiträge

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Child-Theme erstellen

Tipps & Tricks per Mail

Themenidee?

Werbung

Kostenlose WordPress- und Divi-Tricks im Abo

Vielen Dank.

Pin It on Pinterest