Divi Button Effekte

von TomOkt. 6, 2018CSS

Quelle: markhendriksen.com

Ein Schritt für Schritt Tutorial für 3 benutzerdefinierte Divi-Button mit einem schönen Hover-Effekt. Sie können die Button mit diesem Tutorial Schritt für Schritt erstellen.

Um die Button in Aktion zu sehen, einfach auf “Button Effekte ansehen” drücken.

Button Effekte ansehen

Divi Button Effekt

Button Effekt 1

klick mich

Button Effekt 2

klick mich

Button Effekt 3

Custom Button 1

Custom Button 3

Benutzerdefinierter Button 1

Platzieren Sie ein Button-Modul und verwenden Sie diese Einstellungen:

Registerkarte “Inhalt”
Geben Sie einen Schaltflächentext und einen Link ein

Registerkarte Design

Textfarbe: Hell
Benutzerdefinierte Stile für Button : Ja
Button Textgröße: 18px
Button Hintergrundfarbe: # ef4b4c
Button Rahmenbreite: 0
Button Rahmenfarbe: rgba (255,255,255,0)
Button Rahmenradius: 0px
Button Zeichenabstand: 2px
Schriftart Stil: Großbuchstaben
Button Symbol anzeigen: Ja
Button-Symbol: Wählen Sie Ihr Symbol
Button-Symbol nur für Hover-Over : Nein
Hover Hintergrundfarbe: # d53f41
Benutzerdefinierte Füllung : Rechts: 65px, Links 25px
Box Shadow:Box Shadow Horizontale Position: 0px
Box Shadow Vertikale Position: 2px
Box Shadow Unschärfe Stärke: 18px
Box Schatten Verbreitung Stärke: 0px
Schattenfarbe: rgba (0,0,0,0,3)

Registerkarte “Erweitert”
CSS-Klasse: custom_button_1

Fügen Sie den folgenden CSS-Code in Ihr untergeordnetes Thema oder in Divi> Themenoptionen> Benutzerdefiniertes CSS ein

.custom_button_1:after {
	background-color: #d53f41; /* Change this color to your own */
	padding: 5px 12px;
	top: 0;
	right: 0;
	bottom: 0;
	border-left: 1px solid #c0232e; /* Change this color to your own */
}

Ändern Sie die Farbcodes für Ihr eigenes Farbschema.

Benutzerdefinierter Button 2

Platzieren Sie ein Button-Modul und verwenden Sie diese Einstellungen:

Registerkarte “Inhalt”
Geben Sie einen Buttontext und einen Link ein

Registerkarte Design
Textfarbe: Hell
Benutzerdefinierte Stile für Button: Ja
Button Hintergrundfarbe: e83600
Button Rahmenbreite: 0
Button Schriftabstand: 1px
Schriftart: Großschreibung
Button-Symbol anzeigen: ja
Button-Symbol: Wählen Sie das Symbol
Button-Symbol für Hover-Over anzeigen : Ja
Box Shadow:
Box Shadow Horizontale Position: 0px
Box Shadow Vertikale Position: 2px
Box Shadow Unschärfe Stärke: 18px
Box Schatten Verbreitung Stärke: 0px
Schattenfarbe: rgba (0,0,0,0.3)

Registerkarte “Erweitert”
Im Feld “CSS-Klasse” können Sie eine dieser 4 Klassen abhängig vom Hover-Effekt verwenden, den Sie erzielen möchten.

Für den ersten Button Hover-Effekt wie bei der Demo-Verwendung:
custom_button_2_up

Für den zweiten Button Hover-Effekt wie bei der Demo-Verwendung:
custom_button_2_left

Für den dritten Button Hover-Effekt wie bei der Demo-Verwendung:
custom_button_2_down

Für den vierten Button Hover-Effekt wie bei der Demo-Verwendung:
custom_button_2_right

Platzieren Sie das folgende CSS in Divi – Designoptionen – Custom CSS, wenn Sie die Klasse custom_button_2_up verwenden

/* CUSTOM BUTTON 2 UP */

.custom_button_2_up {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.custom_button_2_up:hover {
	padding: .3em 1em !important;
}

.custom_button_2_up:after {
	left: 0 !important;
	top: -100%;
	margin-left: 0em !important;
	position: absolute;
	height: 100%;
	width: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #e09900; /* Change this color to your own */
	text-align: center;
}

body #page-container .custom_button_2_up:hover:after {
	line-height: 1.6em;
	font-size: 30px!important;
}

.custom_button_2_up:hover:after {
	top: 0;
	left: 0;
}

Platzieren Sie die folgende CSS in Divi – Designoptionen – Custom CSS, wenn Sie die Klasse custom_button_2_left verwenden

/* CUSTOM BUTTON 2 LEFT */

.custom_button_2_left {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.custom_button_2_left:hover {
	padding: .3em 1em !important;
}

.custom_button_2_left:after {
	left: -100% !important;
	top: 0%;
	margin-left: 0em !important;
	position: absolute;
	height: 100%;
	width: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #e09900; /* Change this color to your own */
	text-align: center;
}

body #page-container .custom_button_2_left:hover:after {
	line-height: 1.6em;
	font-size: 30px!important;
}

.custom_button_2_left:hover:after {
	top: 0;
	left: 0 !important;
}

Platzieren Sie die folgende CSS in Divi – Designoptionen – Custom CSS, wenn Sie die Klasse custom_button_2_down verwenden

/* CUSTOM BUTTON 2 DOWN */

.custom_button_2_down {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.custom_button_2_down:hover {
	padding: .3em 1em !important;
}

.custom_button_2_down:after {
	left: 0 !important;
	bottom: -100%;
	margin-left: 0em !important;
	position: absolute;
	height: 100%;
	width: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #e09900; /* Change this color to your own */
	text-align: center;
}

body #page-container .custom_button_2_down:hover:after {
	line-height: 1.6em;
	padding-top: 0px;
	font-size: 30px!important;
}

.custom_button_2_down:hover:after {
	bottom: 0% !important;
	left: 0;
}

Platzieren Sie die folgende CSS in Divi – Designoptionen – Custom CSS, wenn Sie die Klasse custom_button_2_right verwenden

/* CUSTOM BUTTON 2 RIGHT */

.custom_button_2_right {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.custom_button_2_right:hover {
	padding: .3em 1em !important;
}

.custom_button_2_right:after {
	right: -100% !important;
	top: 0%;
	margin-left: 0em !important;
	position: absolute;
	height: 100%;
	width: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #e09900; /* Change this color to your own */
	text-align: center;
}

body #page-container .custom_button_2_right:hover:after {
	line-height: 1.6em;
	font-size: 30px!important;
}

.custom_button_2_right:hover:after {
	top: 0;
	right: 0 !important;
}

Benutzerdefinierter Knopf 3

Platzieren Sie ein Button-Modul und verwenden Sie diese Einstellungen:

Registerkarte “Inhalt”
Geben Sie einen Schaltflächentext und einen Link ein

Registerkarte Design
Textfarbe: Hell
Benutzerdefinierte Stile für Button: Ja
Button Textgröße: 18px
Button Rahmenbreite: 0
Button Rahmenradius: 25px
Button Schriftabstand: 1px
Schriftart: Großbuchstaben
Benutzerdefinierte Füllung: Oben: 12px, Rechts: 25px, Unten: 12px, links 25px
Box Shadow:
Box Shadow Horizontale Position: 0px
Box Shadow Vertikale Position: 2px
Box Shadow Unschärfe Stärke: 35px
Box Schatten Verbreitung Stärke: 0px
Schattenfarbe: rgba (0,0,0,0.3)

Registerkarte “Erweitert”
CSS-Klasse: custom_button_3

Platzieren Sie das folgende CSS in Divi – Themenoptionen – Benutzerdefiniertes CSS

.et_pb_module a.custom_button_3 {
    background-color: #0149CC; /* Change this color to your own */
    background-image: linear-gradient(to right,#0149CC,#00C6FF,#0149CC); /* Change this color to your own */
    display: inline-block !important;
    cursor: pointer;
    position: relative;
    transition: color 0.35s ease, background-position 0.3s ease-in-out, 
    background-color 0.35s ease, box-shadow 0.3s ease-in-out;
    z-index: 1;
    overflow: hidden;
    background-size: 200% 100%;
    background-position: 0 0;
}

.et_pb_module a.custom_button_3:hover {
    box-shadow: -0.25em 0.25em 2.25em rgba(0,0,0,0.35);
    background-position: 100% 100%;
}

Um die Hintergrundfarbe der Schaltfläche zu ändern, müssen Sie die Farbcodes ändern von:
background-color :
background-image :