Create Better Divi Headers

17 Line Hover Effects for Divi Button Module

by | Apr 8, 2017 | 12 comments

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! ;)

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!