The Divi Buttons module has a plethora of customization options. You can change the color, icon, hover style, animation, position… but what if you want to go above and beyond what Divi has to offer?
This is where this Divi Button tutorial comes in. You can choose from 25 button hover effects, all available with easy copy and paste snippets! All you have to do to use these effects is copy and paste the code – and follow my instructions to easily convert any of these button styles to presets.
Custom Button 1
CODE
Place a Button module and use these settings:
Content tab
Fill in a button text and a link
Design tab
Text color: Light
Use Custom Styles for Button: Yes
Button Text Size: 18px
Button Background Color: #ef4b4c
Button Border Width: 0
Button Border Color: rgba(255,255,255,0)
Button Border Radius: 0px
Button Letter Spacing: 2px
Font Style: Uppercase
Show Button Icon: yes
Button Icon: Choose your icon
Only Show Icon On Hover for Button: No
Button Hover Background Color: #d53f41
Custom Padding: Right: 65px, Left 25px
Box Shadow:
Box Shadow Horizontal Position: 0px
Box Shadow Vertical Position: 2px
Box Shadow Blur Strength: 18px
Box Shadow Spread Strength: 0px
Shadow Color: rgba(0,0,0,0.3)
Advanced tab
CSS Class: custom_button_1
Place the following CSS code in your child theme, you can follow this guide on how to make a child theme or in Divi > Theme options > Custom CSS
[html]
.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 */
}
[/html]
Change the color codes for your own color scheme.
Custom Button 2
Use the CSS class dl-icon-right and make sure to adjust the button padding on hover to leave space for the Icon.
[html]
/* CSS for buttons – Icon Right */
.dl-icon-right {
–btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-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.dl-icon-right:hover::after {
right: 0;
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right {
overflow: hidden;
}
[/html]
Custom Button 3
Place a Button module and use these settings:
Content tab
Fill in a button text and a link
Design tab
Text color: Light
Use Custom Styles for Button: Yes
Button Background Color: e83600
Button Border Width: 0
Button Letter Spacing: 1px
Font Style: Uppercase
Show Button Icon: yes
Button Icon: Choose your icon
Only Show Icon On Hover for Button: Yes
Box Shadow:
Box Shadow Horizontal Position: 0px
Box Shadow Vertical Position: 2px
Box Shadow Blur Strength: 18px
Box Shadow Spread Strength: 0px
Shadow Color: rgba(0,0,0,0.3)
Advanced tab
In the CSS Class field you can use one of these 4 classes depends on the hover effect you want to achieve.
For the first button hover effect as on the demo use:
custom_button_2_up
For the second button hover effect as on the demo use:
custom_button_2_left
For the third button hover effect as on the demo use:
custom_button_2_down
For the fourth button hover effect as on the demo use:
custom_button_2_rightPlace the following CSS in Divi – Theme options – Custom CSS if you are using the class custom_button_2_up
[html]
/* 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;
}
[/html]
Place the following CSS in Divi – Theme options – Custom CSS if you are using the class custom_button_2_left
[html]
/* 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;
}
[/html]
Place the following CSS in Divi – Theme options – Custom CSS if you are using the class custom_button_2_down
[html]
/* 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;
}
[/html]
Place the following CSS in Divi – Theme options – Custom CSS if you are using the class custom_button_2_right
[html]
/* 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;
}
[/html]
Custom Button 4
Use the CSS class dl-icon-fade. Adjust the icon font-size if needed.
[html]
/* CSS for buttons – Icon Animation – Fade In */
.dl-icon-fade {
–btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-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.dl-icon-fade:hover::after {
opacity: 1;
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade {
overflow: hidden;
}
[/html]
Custom Button 5
Place a Button module and use these settings:
Content tab
Fill in a button text and a link
Design tab
Text color: Light
Use Custom Styles for Button: Yes
Button Text Size: 18px
Button Border Width: 0
Button Border Radius: 25px
Button Letter Spacing: 1px
Font Style: Uppercase
Custom Padding: Top: 12px, Right: 25px, Bottom: 12px, Left 25px;
Box Shadow:
Box Shadow Horizontal Position: 0px
Box Shadow Vertical Position: 2px
Box Shadow Blur Strength: 35px
Box Shadow Spread Strength: 0px
Shadow Color: rgba(0,0,0,0.3)
Advanced tab
[html]
CSS Class: custom_button_3Place the following CSS in Divi – Theme options – Custom 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%;
}
[/html]
Custom Button 6
Use the CSS class dl-double-border-top-left. Make sure to set the same border width in CSS code, as the border width set in the Button module settings.
[html]
/* CSS for buttons – Double border on hover – Top & Left */
.dl-double-border-top-left {
–border-width: 2px; /* set the Button border width */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-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: ”;
z-index: -1;
}
#page-container .et-l .et_pb_section .et_pb_button.dl-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);
}
[/html]