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
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;
}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;
}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;
}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;
}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
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;
}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;
}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;
}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;
}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
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);
}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);
}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);
}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);
}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));
}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
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;
}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;
}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;
}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;
}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
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;
}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;
}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;
}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;
}Werbung
Elegant Themes - der Hersteller des Divi-Themes - empfiehlt für eine Paginierung von Blog-Beiträgen das Plugin WP-PageNavi. Nur leider sieht das Resultat standardmässig nicht so hübsch aus. Mit ein wenig CSS wird das Ganze besser lesbar und ...
Sehr grosse und hohe Bilder können im Divi-Theme ganz einfach scrollbar eingebunden werden. Das ist total simpel und kann auch mal hilfreich sein. Der Trick, der zeigt wie's geht, folgt hier.
WordPress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich ...
Vor gut anderthalb Jahren haben wir Ihnen hier bei Dr. Code gezeigt, wie Sie die aktuelle Jahreszahl auf Ihrer Website mittels Shortcode anzeigen können. Wer das Divi-Theme nutzt, hat noch eine weitere Möglichkeit zur Hand, welche wir Ihnen ...
Keine Inhalte gefunden.
Werbung
