How To Make a Divi Button with Broken Border
Demo
Implementation
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.
<script type="text/javascript"> (function($) { $(function() { $(".broken_border_button").wrap("<span class='broken_border_button_wrapper'></span>"); }) })(jQuery); </script>
/* 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 */
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.
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.
Hi!
What a nice tutorial, just what I was looking for.
Is it possible to have the two ‘separate’ borders of the button in separate colors?
Cheers,
Hi LonaBSarti,
the border actually is not “broken” into two peaces, it’s only pseudo elements placed over the border which makes it look like it’s broken. So, if you apply a color to the border it will take effect on the whole border.
It is possible to what you are suggesting but with a different approach.
P.S. sorry for the late reply, sometimes I’m too busy and cannot reply immediately :)