Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

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.

Free Download Divi Section Layouts

Download 19 ready-to-use Divi templates for FREE!

You have Successfully Subscribed! Please confirm your email address.

Black Friday Is Coming!

Subscribe to get notified when the biggest SALE starts!

You have Successfully Subscribed! Please confirm your email address.

Pin It on Pinterest

Share This