Divi: Coole Button Effekte erstellen mit CSS und HTML

von | Apr 5, 2022 | Allgemein | 0 Kommentare

Schlagwörter: Buttons - CSS - CSS3 - DIVI

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>

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

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

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

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

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 */
}

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Translate:

Webinare

DIVI Theme

Hosting