Create Better Divi Headers

Animated Border Effect for Divi Button Module

by | May 3, 2017 | 6 comments

In this tutorial we will apply a nice animated border effect to Divi Button module on hover state, see the demo below.
Demo:
Let’s implement it step by step.
Step 1:

Apply button module advanced design settings

Step 2:

Add the animated_border CSS class to Button Module Settings -> Custom CSS -> CSS Class field like it is shown in the screenshot below.

Step 3:

Here is the CSS code snippet for the animated border effect:

/* Animated border effect */

.animated_border span {
  position: absolute;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  z-index: 1;
}

@media all and (max-width: 980px) {
   .et_pb_button.animated_border:after {
      line-height: 1.7em !important;
   }
}

.animated_border .border {
  border: 1px solid #ffffff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.animated_border .top, .animated_border .bottom, .animated_border .left, .animated_border .right {
  background-color: #ffffff;
  height: 1px;
  width: 0;
}
.animated_border .left, .animated_border .right {
  height: 0;
  width: 1px;
}
.animated_border .top {
  top: -5px;
  left: -15px;
}
.animated_border .bottom {
  bottom: -5px;
  right: -15px;
}
.animated_border .left {
  top: -15px;
  right: -5px;
}
.animated_border .right {
  bottom: -15px;
  left: -5px;
}
.animated_border:hover .border {
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
}
.animated_border:hover .top, .animated_border:hover .bottom {
  width: 100%;
}
.animated_border:hover .left, .animated_border:hover .right {
  height: 100%;
}
.animated_border:hover .top {
  left: -5px;
}
.animated_border:hover .bottom {
  right: -5px;
}
.animated_border:hover .left {
  top: -5px;
}
.animated_border:hover .right {
  bottom: -5px;
}

/* End animated border effect */

 

Copy the animated border effect CSS code snippet above and add it into the Divi -> Theme Options -> General -> Custom CSS field.
Step 4:

And here is the JS code snippet for the effect. It adds additional markup inside the button <a> tag.

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

    $('a.animated_border').prepend('<span class="border"></span><span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>');

})(jQuery);
</script>

 

Copy the JS code snippet above and add it into the Divi -> Theme Options -> Integration -> Add code to the < body > field.
That’s all, hope you’ll like this effect. 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!