Divi Button Tabs [DOWNLOAD]

Code Snippets, Divi

Recently a question was asked in one of the Divi Facebook groups about how to achieve a particular effect using Divi. By manipulating the native Tabs module using pure CSS I was able to recreate the desired effect.

Custom Divi Tabs effect

Here is the link to download the JSON file if you’re interested in using this on your project as well.

File Contents

The JSON file contains a ROW which has a Tabs module and a Code module which holds the additional CSS needed for this effect to work.

I’ve placed CSS in the Tab module where available to keep things as native to Divi as possible and the additional CSS that didn’t have a place in the Tab module has been placed in the Code module. Feel free to extract the CSS in the code module to your own child theme style.css file or place it in your Divi panel CSS field.


The icons are inserted using CSS and the code for them is in the Code module. If you’d like to change the icons, you can find additional unicodes for Divi’s native icon set here: https://www.elegantthemes.com/blog/resources/elegant-icon-font

If you’re not familiar with working with unicodes in CSS, you only need the portion of the unicode that comes after the ‘x’ and you can omit the trailing semicolon.

For example, the unicode for the credit card icon is:


All we need from this unicode is e014. See the Code module included in the CSS for actual uses.

Join the Discussion

Have something to add to this or want to comment on something mentioned in the article? Hop on over to our offical Facebook page and join the discussion!

About the Author

Alex Brinkman

Alex Brinkman

In addition to being an entrepreneur, Alex is addicted to lifestyle design, a sucker for motivational quotes and: "... just an all around great guy." - everyone When he's not busy banging on a laptop in a some obscure coffeeshop, he enjoys obstacle course races, giving random strangers compliments and automating as much of his life as possible.