Animated Border Effect for Divi Button Module

by | May 3, 2017 | 2 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! 😉

Pin It on Pinterest

Shares
Share This