Download our Button Module layout pack for Divi.
It is FREEBIE FRIDAY and for this edition, we have some Divi Button Modules with unique Hover Effects effects which we know will help set your site apart. Best of all, they are easy to customize to fit your brand or site and can be used with any Divi install.
Preview:
This Friday we have 3 styles for you:
Style 1: Expand from the center
The first style uses an eye-catching style that expands form the middle leaving 2 corners exposed.
Style 2: Expand from the left
For the second style, the background color pushes in from the left on hover.
Style 3: Expand from the top
For our last style, the background color pushes in from the top on hover.
Using the Custom Text 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 is a 3 Column Row with a Text Module which makes our button and its Code Module that contains the CSS 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 Text and the CSS Code Module and go paste it on the page where you want to use it.
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
When you have the Text and the Code Module on the page you want, you can easily customize the colors by opening the Code Module and editing the lines with the comments that mention you can change the color there.
Step 4) Customize the Button Link
All you need to do is open the Text Module and click on the Link section under Content, then change the URL to any page you want to link to.
0 Comments