Ihr habt genug von den normalen und langweiligen Buttonsdesign die ihr mit den Moduleinstellungen in Divi erstellen könnt? Dann habe ich heute hier ein paar Beispiele wie ihr mit reinem CSS eure Divi Buttons aufpeppen könnt.
In diesem Video zeige ich euch was man alles machen kann und hier auf dieser Seite findet man ganz unten die entsprechenden CSS Befehle. So könnt ihr eurer Divi Webseite einen individuellen Look verpassen.
Video
Button Von Links oder Rechts zusliden
Hier wird der Hover Effekt entweder von Links nach Rechts gehen oder von Rechts nach Links gehen
HTML
1
| <a href="#" class="cb-btn-slide-horizontal">Dein Button Text</a> |
<a href="#" class="cb-btn-slide-horizontal">Dein Button Text</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| /*** Button Links-Rechts oder Rechts-Links ***/
.cb-btn-slide-horizontal {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-slide-horizontal:hover {
color: #fff; /* Schriftfarbe */
}
.cb-btn-slide-horizontal::after {
content: "";
background: #fdb932; /* Hintergrundfarbe */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
top: 0;
bottom: 0;
left: 100%; /* CSS Effekt 1 */
right: -100%; /* CSS Effekt 2 */
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.cb-btn-slide-horizontal:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
} |
/*** Button Links-Rechts oder Rechts-Links ***/
.cb-btn-slide-horizontal {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-slide-horizontal:hover {
color: #fff; /* Schriftfarbe */
}
.cb-btn-slide-horizontal::after {
content: "";
background: #fdb932; /* Hintergrundfarbe */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
top: 0;
bottom: 0;
left: 100%; /* CSS Effekt 1 */
right: -100%; /* CSS Effekt 2 */
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.cb-btn-slide-horizontal:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
Button Aussen nach Innen
Mit diesem Effekt wird der Hover Effekt von Aussen nach Innen geführt
HTML
1
| <a href="#" class="cb-btn-slide-left-right">Dein Button Text</a> |
<a href="#" class="cb-btn-slide-left-right">Dein Button Text</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| /*** Button Links / Rechts zusliden ***/
.cb-btn-slide-left-right {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* Abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-slide-left-right:before, .cb-btn-slide-left-right:after {
content: "";
z-index: -1;
position: absolute;
width: 50%;
height: 100%;
top: 0;
left: -50%;
background-color: #fdb932; /* Hover Text Color */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cb-btn-slide-left-right:after {
left: 100%;
}
.cb-btn-slide-left-right:hover {
color: #000; /* Textfarbe */
}
.cb-btn-slide-left-right:hover:before {
left: 0;
}
.cb-btn-slide-left-right:hover:after {
left: 50%;
} |
/*** Button Links / Rechts zusliden ***/
.cb-btn-slide-left-right {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* Abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-slide-left-right:before, .cb-btn-slide-left-right:after {
content: "";
z-index: -1;
position: absolute;
width: 50%;
height: 100%;
top: 0;
left: -50%;
background-color: #fdb932; /* Hover Text Color */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cb-btn-slide-left-right:after {
left: 100%;
}
.cb-btn-slide-left-right:hover {
color: #000; /* Textfarbe */
}
.cb-btn-slide-left-right:hover:before {
left: 0;
}
.cb-btn-slide-left-right:hover:after {
left: 50%;
}
Button Oben nach Unten oder Unten nach Oben
Mit diesem Code wird wird der Effekt entweder von Unten nach Oben geführt oder umgekehrt also von Oben nach Unten
HTML
1
| <a href="#" class="cb-btn-slide-unten-hoch">Dein Button Text</a> |
<a href="#" class="cb-btn-slide-unten-hoch">Dein Button Text</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| /*** Button Unten nach Oben ***/
.cb-btn-slide-unten-hoch {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-slide-unten-hoch:hover {
color: #000; /* Hover Text Color */
}
.cb-btn-slide-unten-hoch::after {
content: "";
background: #fdb932; /* Hintergrundfarbe */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: 0;
right: 0;
top: 100%; /* CSS Effekt 1 */
bottom: -100%; /* CSS Effekt 2 */
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.cb-btn-slide-unten-hoch:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
} |
/*** Button Unten nach Oben ***/
.cb-btn-slide-unten-hoch {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-slide-unten-hoch:hover {
color: #000; /* Hover Text Color */
}
.cb-btn-slide-unten-hoch::after {
content: "";
background: #fdb932; /* Hintergrundfarbe */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: 0;
right: 0;
top: 100%; /* CSS Effekt 1 */
bottom: -100%; /* CSS Effekt 2 */
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.cb-btn-slide-unten-hoch:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
Button von Innen nach Aussen
Hiermit gibts einen lustigen Button Effekt und zwar geht der Hover Effekt von innen nach aussen.
HTML
1
| <a href="#" class="cb-btn-innen-aussen">Dein Button Text</a> |
<a href="#" class="cb-btn-innen-aussen">Dein Button Text</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| /*** Button Innen nach Aussen ***/
.cb-btn-innen-aussen {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-innen-aussen:hover {
color: #fff;/* Schriftfarbe */
}
.cb-btn-innen-aussen::after {
content: "";
background: #fdb932; /* Background */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0);
transition: all 0.3s ease;
}
.cb-btn-innen-aussen:hover::after {
transition: all 0.3s ease-out;
transform: scale(1, 1);
} |
/*** Button Innen nach Aussen ***/
.cb-btn-innen-aussen {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-innen-aussen:hover {
color: #fff;/* Schriftfarbe */
}
.cb-btn-innen-aussen::after {
content: "";
background: #fdb932; /* Background */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0);
transition: all 0.3s ease;
}
.cb-btn-innen-aussen:hover::after {
transition: all 0.3s ease-out;
transform: scale(1, 1);
}
Button Schräger Effekt
Mit diesem Code wird dem Button ein Effekt verpasst der ein wenig schräg ist
HTML
1
| <a href="#" class="cb-btn-schraeg">Dein Button Text</a> |
<a href="#" class="cb-btn-schraeg">Dein Button Text</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| /* Button Schräger Effekt*/
.cb-btn-schraeg {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-schraeg:hover {
color: #fff; /* Schriftfarbe */
}
.cb-btn-schraeg::after {
content: "";
background: #fdb932; /* Hintergrundfarbe */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1); /* CSS Effekt 1 */
transition: all 0.3s ease;
}
.cb-btn-schraeg:hover::after {
transition: all 0.3s ease-out;
transform: skewX(-45deg) scale(1, 1); /* CSS Effekt 2 */
} |
/* Button Schräger Effekt*/
.cb-btn-schraeg {
background: #fff; /* Hintergrundfarbe */
color: #fdb932; /* Schriftfarbe */
border: 2px solid #fdb932; /* Rand */
padding: 16px 20px;
border-radius: 3px; /* abgerundete Ecken */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
}
.cb-btn-schraeg:hover {
color: #fff; /* Schriftfarbe */
}
.cb-btn-schraeg::after {
content: "";
background: #fdb932; /* Hintergrundfarbe */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1); /* CSS Effekt 1 */
transition: all 0.3s ease;
}
.cb-btn-schraeg:hover::after {
transition: all 0.3s ease-out;
transform: skewX(-45deg) scale(1, 1); /* CSS Effekt 2 */
}
0 Kommentare