How To Make a Divi Button with Broken Border

by | Mar 15, 2018 | 0 comments

In this quick tutorial I will show how to make a Divi button with broken border.

Demo

Implementation

To “break” the button border we will be using the pseudo elements. We could use those of the button itself but we cannot do that since they are being used for adding icons to the button.

So, we will have to wrap the button with a span container and use its pseudo elements as “white gaps” placed over the button border. For wrapping the button we will use a simple jQuery code and then apply some custom CSS.

First we need to add a Button Module to our page and assign the broken_border_button CSS class to it.

Then add a Code Module below the Button Module and copy the following jQuery into it.

<script type="text/javascript">
(function($) { 
  $(function() { 
    $(".broken_border_button").wrap("<span class='broken_border_button_wrapper'></span>"); 
  }) 
})(jQuery);
</script>

Use the Code Module if you want to use this button on a specific page only but if you want to use the same button styling throughout the site then add the jQuery code above into the Divi -> Theme Options -> Integration -> Add code to the < head > textarea.

Next add the following CSS into the Divi -> Theme Options -> General -> Custom CSS textarea or into your child theme style.css file.

/* START: Divi Button with Broken Border */
.broken_border_button_wrapper {
    position: relative;
    display: inline-block;
}
.broken_border_button_wrapper:before,
.broken_border_button_wrapper:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 5px; /* equals to the button border width */
    background-color: #fff;
}
.broken_border_button_wrapper:before {
    top: -9px;
    left: 10%;
}
.broken_border_button_wrapper:after {
    bottom: -9px;
    left: 25%;
}
.broken_border_button_wrapper:before,
.broken_border_button_wrapper:after {
    -webkit-transform: skewX(30deg);
        -ms-transform: skewX(30deg);
            transform: skewX(30deg);
    z-index: 3;
}
.broken_border_button_wrapper .et_pb_button.et_hover_enabled:hover:after, 
.broken_border_button_wrapper .et_pb_button.et_pb_hovered:hover:after {
    -webkit-transition: all 0.2s !important;
    -o-transition: all 0.2s !important;
    transition: all 0.2s !important;
}
.broken_border_button_wrapper .et_pb_button, 
.broken_border_button_wrapper .et_pb_module .et_pb_button {
    -webkit-transition: padding 0.2s;
    -o-transition: padding 0.2s;
    transition: padding 0.2s;
}
/* END: Divi Button with Broken Border */

This CSS sets the width and height values for the :before and :after pseudo elements of the button span wrapper, positions them above the button top and bottom borders respectively and then skews them by 30 degrees.

The important point here is that the pseudo elements’ height should be equal to the button border width and the background color should be the same as the button background color.

That’s all, now save everything and enjoy!

Hope you’ll find this tutorial useful. Share it with your friends and feel free to leave your thoughts and suggestions in the comments section below.

Pin It on Pinterest

Shares
Share This