6 FREE CSS Divi Button Module Styles

Download our CSS Button Module layout pack for Divi.

It is FREEBIE FRIDAY and for this edition, we have 6 Divi Button Modules with cool CSS Hover Effects effects that look fantastic. Best of all, they are easy to customize to fit your brand or site and can be used with any Divi install.


Free Divi CSS Buttons

Using the Custom Button Modules:

Step 1) Import the layout pack into the Divi Library

Similar to importing any layout pack we release, Import the JSON file directly into the Divi Library. Once it is imported you will see that the layout consists of two 3 Column Rows with a Button and Code Module in each column.

Step 2) Copy the Button style you want to use

This is super easy. Open the layout in the Divi Library. This will launch the Divi Builder and you will see our 3 Columns with a Button Style in each. If you want to use Button Style 1, copy the Button and the CSS Code Module and go paste it on the page where you want to use it. If you find that you’ll use a button in more than one location it is better to only copy the button module, then add the corresponding CSS to Divi > Theme Options > Custom CSS.

NOTE: Alternatively, you could also just import the layout as a Row right on the page where you want the Buttons and just delete the styles you don’t want.

Step 3) Customize the Button Colors

You can customize the style of the buttons by editing the CSS code.

Step 4) Customize the Button Text and Link

You can edit this just as you would any other button module in the module settings.

If you loved these FREE Divi Button Modules, you’ll love our other freebies. Click the link below to see other helpful tools to help you grow both your skills and business.


Submit a Comment

Explore more from Divi Engine