The Divi Double Button allows you to display 2 call-to-action buttons for your Divi Website side by side in a sleek, modern, eye catching way! Featured on Day 82 of the Elegant Themes 100 Days of Divi series, there was awesome feedback on the look and design but many questions about how to style and customize it. Well now it’s available as a layout for you to import quickly and easily without coding it yourself!
The buttons are fully responsive and will line up side by side on desktop, tablet and mobile views. The hard work of creating and coding the buttons is taken care of, all you have to do is import the button to your Divi website and change the colors to your liking.
This is not a plugin and since it’s CSS based, it’s compatible with every version of Divi and will be moving forward without needing to update. If you’re advanced at CSS, feel free to go wild and make any CSS changes or additions you’d like!
A few things to note:
A basic knowledge of CSS is recommended but not required
You will use CSS to change the colors of the buttons
You can use the Divi Custom Styles to change the font size and color of the buttons but that will overwrite the CSS hover over and mobile styles.
The diagonal line (CSS clip path) isn’t currently supported on FireFox & Internet Explorer. Bummer, I know. For now, the button will currently revert to a straight line in the middle on those browsers. I’ll update this as soon as there’s a fix or workaround.
Firefox 47+ supports clip-path behind a flag. (Updated: August 2016)
For any questions or feedback, EMAIL ME and I’ll get back to you! Oh and I’d love to see how you implemented this into your site(s)