17 Line Hover Effects for Divi Button Module
In this post I would like to share some CSS snippets for 17 line hover effects for Divi Button Module. These effects were inspired by this pen on codepen.io, check out the demos below.
You can implement these hover effects in a few simple steps as explained in this tutorial.
Demo
Button module settings
For these effects to work you will need to enable the button icon, set its placement to right and to be shown only on hover as it is indicated in the images below.
Adding CSS classes
Add the line_animation CSS class and the CSS class provided for each effect to Button Module Settings -> Custom CSS -> CSS Class field like it is indicated in the image below.
Adding the custom CSS
Copy the hover effects CSS snippets below and add them into Divi -> Theme Options -> General -> Custom CSS field.
JS code for the effects from 13 to 17
For the effects #13 to #17 we will need to wrap buttons with a span tag (with necessary CSS classes) because for these effects we need an extra pair of ::before and ::after pseudo-elements. To accomplish this we will use the jQuery .wrap() function. Copy the JS code snippet below and add it into Divi -> Theme Options -> Integration -> Add code to the < body > field.
<script type="text/javascript">
(function($) {
/* wrap hover-13 */
$( "a.hover-13" ).wrap('<span class="inner-wrapper wrapper-13"></span>');
/* wrap hover-14 */
$( "a.hover-14" ).wrap('<span class="inner-wrapper wrapper-14"></span>');
/* wrap hover-15 */
$( "a.hover-15" ).wrap('<span class="inner-wrapper wrapper-15"></span>');
/* wrap hover-16 */
$( "a.hover-16" ).wrap('<span class="inner-wrapper wrapper-16"></span>');
/* wrap hover-17 */
$( "a.hover-17" ).wrap('<span class="inner-wrapper wrapper-17"></span>');
})(jQuery);
</script>
CSS snippets for button hover effects
First copy this general CSS snippet, it is common for all hover effects:
/*** General CSS ***/
body #page-container .et_pb_module .et_pb_button.line_animation:hover {
padding: 0.3em 1em 0.3em 1em !important;
}
body #page-container .et_pb_button.line_animation:after {
left: 0 !important;
margin-left: 0 !important;
}
.inner-wrapper {
position: relative;
display: inline-block;
}
[class*=' hover-'].line_animation:before,
[class*=' hover-'].line_animation:after,
.et_pb_button_module_wrapper > span[class*=' wrapper-']:before,
.et_pb_button_module_wrapper > span[class*=' wrapper-']:after {
display: block;
content: '';
position: absolute;
opacity: 1;
}
/* add this snippet for effects 1 - 16 */
[class*=' hover-'].line_animation:before,
[class*=' hover-'].line_animation:after,
[class*=' hover-'].line_animation.et_pb_button.et_hover_enabled:hover:before,
[class*=' hover-'].line_animation.et_pb_button.et_pb_hovered:hover:before,
[class*=' hover-'].line_animation.et_pb_button.et_hover_enabled:hover:after,
[class*=' hover-'].line_animation.et_pb_button.et_pb_hovered:hover:after{
-webkit-transition: -webkit-transform 0.3s !important;
-o-transition: transform 0.3s !important;
transition: transform 0.3s, -webkit-transform 0.3s !important;
}
/* end */
/* add this snippet for effects 13 - 16 */
.et_pb_button_module_wrapper > span[class*=' wrapper-']:before,
.et_pb_button_module_wrapper > span[class*=' wrapper-']:after,
.et_pb_button_module_wrapper > span[class*=' wrapper-']:hover:before,
.et_pb_button_module_wrapper > span[class*=' wrapper-']:hover:after{
-webkit-transition: -webkit-transform 0.3s !important;
-o-transition: transform 0.3s !important;
transition: transform 0.3s, -webkit-transform 0.3s !important;
z-index: 3;
}
/* end */
/*** END General CSS ***/Then copy the hover effects CSS snippets below and add them into Divi -> Theme Options -> General -> Custom CSS  field. Save everything and enjoy!
Hover Effect #1
CSS Class: hover-1
/*** Hover effect #1 ***/
.hover-1:after {
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #e2061b;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.hover-1:hover:after {
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #1 ***/
Hover Effect #2
CSS Class: hover-2
/*** Hover effect #2 ***/
.hover-2:after {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 3px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #20C2F7;
}
.hover-2:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #2 ***/
Hover Effect #3
CSS Class: hover-3
/*** Hover effect #3 ***/
.hover-3:after {
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #37D631;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.hover-3:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #3 ***/
Hover Effect #4
CSS Class: hover-4
/*** Hover effect #4 ***/
.hover-4:after {
bottom: 0;
right: 0;
width: 100%;
height: 3px;
background-color: #ea20a0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.hover-4:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #4 ***/
Hover Effect #5
CSS Class: hover-5
/*** Hover effect #5 ***/
.hover-5:after {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 6px;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
background-color: #E2061B;
}
.hover-5:hover:after {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
/*** END Hover effect #5 ***/
Hover Effect #6
CSS Class: hover-6
/*** Hover effect #6 ***/
.hover-6:before,
.hover-6:after {
bottom: 0;
right: 0;
height: 3px;
background-color: #20C2F7;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.hover-6:before {
left: 0;
margin-left: 0 !important;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.hover-6:after {
left: 50%;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.hover-6:hover:before,
.hover-6:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #6 ***/
Hover Effect #7
CSS Class: hover-7
/*** Hover effect #7 ***/
.hover-7:before,
.hover-7:after {
width: 100%;
height: 3px;
background-color: #37D631;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.hover-7:before {
top: 0;
left: 0;
margin-left: 0 !important;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.hover-7:after {
bottom: 0;
right: 0;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.hover-7:hover:before,
.hover-7:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #7 ***/
Hover Effect #8
CSS Class: hover-8
/*** Hover effect #8 ***/
.hover-8:before,
.hover-8:after {
left: 0;
width: 100%;
height: 3px;
background-color: #ea20a0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.hover-8:before {
top: 0;
margin-left: 0 !important;
}
.hover-8:after {
bottom: 0;
}
.hover-8:hover:before,
.hover-8:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #8 ***/
Hover Effect #9
CSS Class: hover-9
/*** Hover effect #9 ***/
.hover-9:before,
.hover-9:after {
right: 0;
width: 100%;
height: 3px;
background-color: #E2061B;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
}
.hover-9:before {
top: 0;
}
.hover-9:after {
bottom: 0;
}
.hover-9:hover:before,
.hover-9:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #9 ***/
Hover Effect #10
CSS Class: hover-10
/*** Hover effect #10 ***/
.hover-10:before,
.hover-10:after {
right: 0;
width: 100%;
height: 3px;
background-color: #20C2F7;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.hover-10:before {
top: 0;
}
.hover-10:after {
bottom: 0;
}
.hover-10:hover:before,
.hover-10:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #10 ***/
Hover Effect #11
CSS Class: hover-11
/*** Hover effect #11 ***/
.hover-11:before,
.hover-11:after {
left: 0;
right: 0;
width: 100%;
height: 6px;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
background-color: #37D631;
}
.hover-11:before {
top: 0;
margin-left: 0 !important;
}
.hover-11:after {
bottom: 0;
}
.hover-11:hover:before,
.hover-11:hover:after {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
/*** END Hover effect #11 ***/
Hover Effect #12
CSS Class: hover-12
/*** Hover effect #12 ***/
.hover-12:before,
.hover-12:after {
width: 100%;
height: 3px;
background-color: #ea20a0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.hover-12:before {
top: 0;
left: 0;
margin-left: 0 !important;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.hover-12:after {
bottom: 0;
right: 0;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.hover-12:hover:before {
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
}
.hover-12:hover:after {
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.hover-12:hover:before,
.hover-12:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #12 ***/
Hover Effect #13
CSS Class: hover-13
/*** Hover effect #13 ***/
.wrapper-13:before,
.wrapper-13:after,
.wrapper-13 .hover-13:before,
.wrapper-13 .hover-13:after {
height: 3px;
background-color: #E2061B;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.wrapper-13:before {
top: 0;
left: 0;
right: 50%;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.wrapper-13:after {
top: 0;
right: 0;
left: 50%;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
}
.wrapper-13 .hover-13:before {
bottom: 0;
left: 0;
right: 0%;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
margin-left: 0 !important;
}
.wrapper-13 .hover-13:after {
bottom: 0;
right: 0;
left: 50%;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.wrapper-13:hover:before,
.wrapper-13:hover:after,
.wrapper-13 .hover-13:hover:before,
.wrapper-13 .hover-13:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #13 ***/
Hover Effect #14
CSS Class: hover-14
/*** Hover effect #14 ***/
.wrapper-14:before,
.wrapper-14:after,
.wrapper-14 .hover-14:before,
.wrapper-14 .hover-14:after {
background-color: #20C2F7;
}
.wrapper-14:before,
.wrapper-14:after {
top: 0;
width: 3px;
height: 100%;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
}
.wrapper-14 .hover-14:before,
.wrapper-14 .hover-14:after {
right: 0;
width: 100%;
height: 3px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.wrapper-14:before {
left: 0;
}
.wrapper-14:after {
right: 0;
}
.wrapper-14 .hover-14:before {
top: 0;
}
.wrapper-14 .hover-14:after {
bottom: 0;
}
.wrapper-14:hover:before,
.wrapper-14:hover:after {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.wrapper-14:hover .hover-14:before,
.wrapper-14:hover .hover-14:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #14 ***/
Hover Effect #15
CSS Class: hover-15
/*** Hover effect #15 ***/
.wrapper-15:before,
.wrapper-15:after,
.wrapper-15 .hover-15:before,
.wrapper-15 .hover-15:after {
background-color: #37D631;
}
.wrapper-15:before,
.wrapper-15:after {
width: 3px;
height: 100%;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
}
.wrapper-15 .hover-15:before,
.wrapper-15 .hover-15:after {
width: 100%;
height: 3px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.wrapper-15:before,
.wrapper-15 .hover-15:before {
top: 0;
left: 0;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.wrapper-15 .hover-15:before {
margin-left: 0 !important;
}
.wrapper-15:after,
.wrapper-15 .hover-15:after {
bottom: 0;
right: 0;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.wrapper-15:hover:before,
.wrapper-15:hover:after {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.wrapper-15:hover .hover-15:before,
.wrapper-15:hover .hover-15:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #15 ***/
Hover Effect #16
CSS Class: hover-16
/*** Hover effect #16 ***/
.wrapper-16:before,
.wrapper-16:after,
.wrapper-16 .hover-16:before,
.wrapper-16 .hover-16:after {
background-color: #ea20a0;
}
.wrapper-16:before,
.wrapper-16:after {
width: 3px;
height: 100%;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
}
.wrapper-16 .hover-16:before,
.wrapper-16 .hover-16:after {
width: 100%;
height: 3px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.wrapper-16:before {
bottom: 0;
left: 0;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.wrapper-16:after {
top: 0;
right: 0;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
}
.wrapper-16 .hover-16:before {
top: 0;
left: 0;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
margin-left: 0 !important;
}
.wrapper-16 .hover-16:after {
bottom: 0;
right: 0;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.wrapper-16:hover:before,
.wrapper-16:hover:after {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.wrapper-16:hover .hover-16:before,
.wrapper-16:hover .hover-16:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/*** END Hover effect #16 ***/
Hover Effect #17
CSS Class: hover-17
/*** Hover effect #17 ***/
.wrapper-17:before,
.wrapper-17:after,
.wrapper-17 .hover-17:before,
.wrapper-17 .hover-17:after {
background-color: #E2061B;
z-index: 3;
}
.wrapper-17:before,
.wrapper-17:after {
width: 3px;
height: 100%;
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
}
.wrapper-17 .hover-17:before,
.wrapper-17 .hover-17:after {
width: 100%;
height: 3px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.wrapper-17:before {
bottom: 0;
left: 0;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.wrapper-17:after {
top: 0;
right: 0;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
}
.wrapper-17 .hover-17:before {
top: 0;
left: 0;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
margin-left: 0 !important;
}
.wrapper-17 .hover-17:after {
bottom: 0;
right: 0;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}
.wrapper-17:hover:before,
.wrapper-17:hover:after {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.wrapper-17:hover .hover-17:before,
.wrapper-17:hover .hover-17:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.et_pb_button_module_wrapper > span.wrapper-17 .hover-17:before,
.et_pb_button_module_wrapper > span.wrapper-17:hover:before {
-webkit-transition: -webkit-transform 0.2s 0.3s !important;
-o-transition: transform 0.2s 0.3s !important;
transition: transform 0.2s 0.3s, -webkit-transform 0.2s 0.3s !important;
}
.et_pb_button_module_wrapper > span.wrapper-17 .hover-17:after,
.et_pb_button_module_wrapper > span.wrapper-17:hover:after {
-webkit-transition: -webkit-transform 0.2s 0.1s !important;
-o-transition: transform 0.2s 0.1s !important;
transition: transform 0.2s 0.1s, -webkit-transform 0.2s 0.1s !important;
}
.et_pb_button_module_wrapper > span.wrapper-17:before,
.et_pb_button_module_wrapper > span.wrapper-17:hover .hover-17:before {
-webkit-transition: -webkit-transform 0.2s !important;
-o-transition: transform 0.2s !important;
transition: transform 0.2s, -webkit-transform 0.2s !important;
}
.et_pb_button_module_wrapper > span.wrapper-17:after,
.et_pb_button_module_wrapper > span.wrapper-17:hover .hover-17:after {
-webkit-transition: -webkit-transform 0.2s 0.2s !important;
-o-transition: transform 0.2s 0.2s !important;
transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s !important;
}
/*** END Hover effect #17 ***/Hope you’ll find these snippets useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! ;)
Hello sir, I am not a coder but the way you explained was really nice. I have a confusion though the first CSS code where should I copy and paste it and after that hover effect code.
Hi Shubham Madan,
in your site dashboard add the JS code to Divi -> Theme Options -> Integration tab -> Add code to the < body > field and the CSS should be added either to Divi -> Theme Options -> General tab -> Custom CSS field or into the child theme style.css file (if you’re using a child theme).
It’s really great! Thanks. :)
I use hover-17 in a four-column row (above some text) and I can’t find how get the for buttons in one line.
I’m trying the column-height equal on, a lot of CSS but I can do anything it doesn’t work. Or the effect hurts.
Would you help me in it?
Hello Boya. Can you please provide the URL?
Could this be applied to the main menu too?
Would be really cool, wouldn’t it? :) Working on that.
Cab this effect be used/applied on modules and or sections?
Haven’t tried on other modules or sections but I think it is possible, why not?
Good Job… Looks fantastic
Thanks Danny, feel free to use in your projects.
Beautifully laid out post – thank you very much for these nice button enhancements.
Thanks Tonyboy, glad to hear that ;)