17 Line Hover Effects for Divi Button Module

by | Apr 8, 2017 | 10 comments

In this post I would like to share with you the code snippets for 17 line hover effects for Divi Button Module. These effects were suggested by Thomas Aufresne in his pen on codepen.io and I decided to implement them for Divi buttons too(why not?), see the demo below. These are really cool effects and can be implemented in a few simple steps as explained in this tutorial.

Demo:

Hover over buttons to see the effect in action

Step 1:

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.

Step 2:

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.

Step 3:

Copy the hover effects CSS code snippets below and add them into Divi -> Theme Options -> General -> Custom CSS field.

Step 4:

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

JS code snippet
<script type="text/javascript">
(function($) {

/* line animations */

/* 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>');

/* end line animations */

})(jQuery);
</script>

CCS code snippets for button hover effects

First copy this CSS code, it is used for all hover effects:

General CSS
/* 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;
}
/* End General CSS */

Then copy the hover effects CSS code snippets below and add them into Divi -> Theme Options -> General -> Custom CSS  field. Save everything and enjoy!

Hover effect #1 (use "hover-1" CSS class)

/******************** Hover effect #1 ********************/
.hover-1:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 width: 100%;
 height: 3px;
 bottom: 0;
 left: 0;
 background-color: #e2061b;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.hover-1:hover:after {
 transform-origin: bottom left;
 transform: scaleX(1);
}

Hover effect #2 (use "hover-2" CSS class)

/******************** Hover effect #2 ********************/
.hover-2:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 3px;
 transform: scaleX(0);
 background-color: #20C2F7;
 transition: transform 0.3s;
}
.hover-2:hover:after {
 transform: scaleX(1);
}

Hover effect #3 (use "hover-3" CSS class)

/******************** Hover effect #3 ********************/
.hover-3:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: #37D631;
 transform: scaleX(0);
 transform-origin: bottom left;
 transition: transform 0.3s;
}
.hover-3:hover:after {
 transform: scaleX(1);
}

Hover effect #4 (use "hover-4" CSS class)

/******************** Hover effect #4 ********************/
.hover-4:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.hover-4:hover:after {
 transform: scaleX(1);
}

Hover effect #5 (use "hover-5" CSS class)

/******************** Hover effect #5 ********************/
.hover-5:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 6px;
 transform: scaleY(0);
 background-color: #E2061B;
 transition: transform 0.3s;
}
.hover-5:hover:after {
 transform: scaleY(1);
}

Hover effect #6 (use "hover-6" CSS class)

/******************** Hover effect #6 ********************/
.hover-6:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 right: 0;
 margin-left: 0 !important;
 height: 3px;
 background-color: #20C2F7;
 transform: scaleX(0);
 transform-origin: bottom left;
 transition: transform 0.3s;
}
.hover-6:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 left: 50%;
 height: 3px;
 background-color: #20C2F7;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.hover-6:hover:before {
 transform: scaleX(1);
}
.hover-6:hover:after {
 transform: scaleX(1);
}

Hover effect #7 (use "hover-7" CSS class)

/******************** Hover effect #7 ********************/
.hover-7:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 margin-left: 0 !important;
 width: 100%;
 height: 3px;
 background-color: #37D631;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
}
.hover-7:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #37D631;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.hover-7:hover:before {
 transform: scaleX(1);
}
.hover-7:hover:after {
 transform: scaleX(1);
}

Hover effect #8 (use "hover-8" CSS class)

/******************** Hover effect #8 ********************/
.hover-8:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 margin-left: 0 !important;
 width: 100%;
 height: 3px;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
}
.hover-8:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
}
.hover-8:hover:before,
.hover-8:hover:after {
 transform: scaleX(1);
}

Hover effect #9 (use "hover-9" CSS class)

/******************** Hover effect #9 ********************/
.hover-9:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: top right;
 transition: transform 0.3s;
}
.hover-9:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: top right;
 transition: transform 0.3s;
}
.hover-9:hover:before,
.hover-9:hover:after {
 transform: scaleX(1);
}

Hover effect #10 (use "hover-10" CSS class)

/******************** Hover effect #10 ********************/
.hover-10:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #20C2F7;
 transform: scaleX(0);
 transition: transform 0.3s;
}
.hover-10:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #20C2F7;
 transform: scaleX(0);
 transition: transform 0.3s;
}
.hover-10:hover:before,
.hover-10:hover:after {
 transform: scaleX(1);
}

Hover effect #11 (use "hover-11" CSS class)

/******************** Hover effect #11 ********************/
.hover-11:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 right: 0;
 margin-left: 0 !important;
 width: 100%;
 height: 6px;
 transform: scaleY(0);
 background-color: #37D631;
 transition: transform 0.3s;
}
.hover-11:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 6px;
 transform: scaleY(0);
 background-color: #37D631;
 transition: transform 0.2s;
}
.hover-11:hover:before,
.hover-11:hover:after {
 transform: scaleY(1);
}

Hover effect #12 (use "hover-12" CSS class)

/******************** Hover effect #12 ********************/
.hover-12:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 width: 100%;
 height: 3px;
 top: 0;
 left: 0;
 margin-left: 0 !important;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
}
.hover-12:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 width: 100%;
 height: 3px;
 bottom: 0;
 right: 0;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.hover-12:hover:before {
 transform-origin: top right;
 transform: scaleX(1);
}
.hover-12:hover:after {
 transform-origin: bottom left;
 transform: scaleX(1);
}

Hover effect #13 (use "hover-13" CSS class)

/******************** Hover effect #13 ********************/
.wrapper-13:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 right: 50%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
 z-index: 1;
}
.wrapper-13:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 left: 50%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: top right;
 transition: transform 0.3s;
}
.wrapper-13 .hover-13:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 margin-left: 0 !important;
 right: 0%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: bottom left;
 transition: transform 0.3s;
}
.wrapper-13 .hover-13:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 left: 50%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.wrapper-13 .hover-13:hover:before,
.wrapper-13 .hover-13:hover:after {
 transform: scaleX(1);
}
.wrapper-13:hover:before,
.wrapper-13:hover:after {
 transform: scaleX(1);
}

Hover effect #14 (use "hover-14" CSS class)

/******************** Hover effect #14 ********************/
.wrapper-14:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 width: 3px;
 height: 100%;
 background-color: #20C2F7;
 transform: scaleY(0);
 transition: transform 0.3s;
 z-index: 1;
}
.wrapper-14:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 width: 3px;
 height: 100%;
 background-color: #20C2F7;
 transform: scaleY(0);
 transition: transform 0.3s;
}
.wrapper-14 .hover-14:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #20C2F7;
 transform: scaleX(0);
 transition: transform 0.3s;
}
.wrapper-14 .hover-14:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #20C2F7;
 transform: scaleX(0);
 transition: transform 0.3s;
}
.wrapper-14:hover:before,
.wrapper-14:hover:after {
 transform: scaleY(1);
}
.wrapper-14:hover .hover-14:before,
.wrapper-14:hover .hover-14:after {
 transform: scaleX(1);
}

Hover effect #15 (use "hover-15" CSS class)

/******************** Hover effect #15 ********************/
.wrapper-15:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 width: 3px;
 height: 100%;
 background-color: #37D631;
 transform: scaleY(0);
 transform-origin: top left;
 transition: transform 0.3s;
 z-index: 1;
}
.wrapper-15:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 3px;
 height: 100%;
 background-color: #37D631;
 transform: scaleY(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.wrapper-15 .hover-15:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 margin-left: 0 !important;
 width: 100%;
 height: 3px;
 background-color: #37D631;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
}
.wrapper-15 .hover-15:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #37D631;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.wrapper-15:hover:before,
.wrapper-15:hover:after {
 transform: scaleY(1);
}
.wrapper-15:hover .hover-15:before,
.wrapper-15:hover .hover-15:after {
 transform: scaleX(1);
}

Hover effect #16 (use "hover-16" CSS class)

/******************** Hover effect #16 ********************/
.wrapper-16:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 width: 3px;
 height: 100%;
 background-color: #ea20a0;
 transform: scaleY(0);
 transform-origin: bottom left;
 transition: transform 0.3s;
 z-index: 1;
}
.wrapper-16:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 width: 3px;
 height: 100%;
 background-color: #ea20a0;
 transform: scaleY(0);
 transform-origin: top right;
 transition: transform 0.3s;
}
.wrapper-16 .hover-16:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 margin-left: 0 !important;
 width: 100%;
 height: 3px;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.3s;
}
.wrapper-16 .hover-16:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #ea20a0;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.3s;
}
.wrapper-16:hover:before,
.wrapper-16:hover:after {
 transform: scaleY(1);
}
.wrapper-16:hover .hover-16:before,
.wrapper-16:hover .hover-16:after {
 transform: scaleX(1);
}

Hover effect #17 (use "hover-17" CSS class)


/******************** Hover effect #17 ********************/
.wrapper-17:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 left: 0;
 width: 3px;
 height: 100%;
 background-color: #E2061B;
 transform: scaleY(0);
 transform-origin: bottom left;
 transition: transform 0.2s;
 z-index: 1;
}
.wrapper-17:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 right: 0;
 width: 3px;
 height: 100%;
 background-color: #E2061B;
 transform: scaleY(0);
 transform-origin: top right;
 transition: transform 0.2s 0.2s;
}
.wrapper-17 .hover-17:before {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 top: 0;
 left: 0;
 margin-left: 0 !important;
 width: 100%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: top left;
 transition: transform 0.2s 0.3s;
}
.wrapper-17 .hover-17:after {
 display: block;
 content: '' !important;
 position: absolute;
 opacity: 1 !important;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 3px;
 background-color: #E2061B;
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.2s 0.1s;
}
.wrapper-17:hover:before {
 transform: scaleY(1);
 transition: transform 0.2s 0.3s;
}
.wrapper-17:hover:after {
 transform: scaleY(1);
 transition: transform 0.2s 0.1s;
}
.wrapper-17:hover .hover-17:before {
 transform: scaleX(1);
 transition: transform 0.2s;
}
.wrapper-17:hover .hover-17:after {
 transform: scaleX(1);
 transition: transform 0.2s 0.2s;
}

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

Pin It on Pinterest

Shares