5 Animated Divi button module buttons

Looking to create some cool animated buttons using the Divi Builder and the button module?

As more settings become available within the Divi Builder and its modules there are more ways to create unique effects without using any extra code or plugins.

This post will show you how to create 5 animated Divi buttons using only the button module and its built-in module settings. No extra code is required.

Divi buttons with box-shadow hover preview

These buttons will each have a hover animation effect that uses the button modules’ box-shadow settings. The box-shadow settings benefit from being animated by default between the hover and default states. This animation transition can then also be further customized in the transition settings to change its speed, delay, and speed curve.

These are just 5 easy examples of how you can create button hover animation effects. Still, with so many built-in options in your button module, there are hundreds of possible combinations that will allow you to create a huge range of different effects. Use these as a starting point and see what’s possible with Divi.

1. How to create the gradient shine hover button

This button has a subtle light shine animation on hover and uses a white box shadow with opacity to create the effect.

To create this button you will need to use the following settings in the Divi button module;

Design > Button >

• Design > Button > Use Custom Styles for Button = Yes
• Design > Button > Button Text Color = #ffffff
• Design > Button > Button Border Width = 0px
• Design > Button > Button Border Radius = 100px

Design > Spacing >

• Design > Spacing > Padding Top  = 10px
• Design > Spacing > Padding Bottom = 10px
• Design > Spacing > Padding Left = 20px
• Design > Spacing > Padding Right = 20px

Design > Box Shadow

• Design > Box Shadow > Box Shadow Horizontal Position = 50px (HOVER = -50px)
• Design > Box Shadow > Box Shadow Vertical Position = -23px (HOVER = 30px)
• Design > Box Shadow > Box Shadow Blur Strength = 32px
• Design > Box Shadow > Box Shadow Spread Strength = -20px
• Design > Box Shadow > Shadow Color = rgba(255,255,255,0.54)
• Design > Box Shadow > Box Shadow Position = Inner Shadow

Advanced > Transition >

• Advanced > Transition > Transitions Duration = 900ms

2. How to create the slide-right hover button

This button has an animated transition fill from the right on hover. The black areas box-shadows are created using the button modules box-shadow settings for horizontal positioning. Text colors are swapped on hover also.

To create this button you will need to use the following settings in the Divi button module;

Design > Button >

• Design > Button > Use Custom Styles for Button = Yes
• Design > Button > Button Text Color = #000000 (HOVER = #ffffff)
• Design > Button > Button Border Width = 1px
• Design > Button > Button Border Color = #000000
• Design > Button > Button Border Radius = 0px

Design > Spacing >

• Design > Spacing > Padding Left = 25px

Design > Box Shadow >

• Design > Box Shadow > Box Shadow Horizontal Position = 13px (HOVER = -126px)
• Design > Box Shadow > Box Shadow Vertical Position = 0px
• Design > Box Shadow > Box Shadow Blur Strength = 0px
• Design > Box Shadow > Box Shadow Spread Strength = 0px
• Design > Box Shadow > Shadow Color = #000000
• Design > Box Shadow > Box Shadow Position = Inner Shadow

Advanced > Transition >

• Advanced > Transition > Transition Duration = 500ms
• Advanced > Transition > Transition Speed Curve = Ease In

3. How to create the circle hover button

This rounded button starts with a circle and text and transforms to include the full button on hover. The effect is created using a solid white inner box shadow that hides the blue button by default.

To create this button you will need to use the following settings in the Divi button module;

Design > Button >

• Design > Button > Use Custom Styles for Button = Yes
• Design > Button > Button Text Color = #82d5ff (HOVER = #ffffff)
• Design > Button > Button Background Color = #c4eaff (HOVER = #82d5ff)
• Design > Button > Button Border Width = 0px
• Design > Button > Button Border Radius = 100px
• Design > Button > Button Font Weight = Bold
• Show Button Icon = Yes (pick your icon)
• Design > Button > Button Icon Color = #82d5ff (HOVER = #ffffff)
• Design > Button > Button Icon Placement = Left
• Design > Button > Only Show Icon On Hover for Button = No

Design > Box Shadow >

• Design > Box Shadow > Box Shadow Horizontal Position = -105px (HOVER = 0px)
• Design > Box Shadow > Box Shadow Vertical Position = 0px
• Design > Box Shadow > Box Shadow Blur Strength = 0px
• Design > Box Shadow > Box Shadow Spread Strength = 0px
• Design > Box Shadow > Shadow Color = #ffffff
• Design > Box Shadow > Box Shadow Position = Inner Shadow

Advanced > Transition >

• Advanced > Transition > Transition Duration = 200ms
• Advanced > Transition > Transition Speed Curve = Ease-In-Out

4. How to create the slide-up hover button

Similar to button number 2, this button uses the button modules box-shadow settings to create a solid green shadow that transitions using the vertical positioning settings on default and hover states. Text colors are swapped on hover also.

To create this button you will need to use the following settings in the Divi button module;

Design > Button >

• Design > Button > Use Custom Styles for Button = Yes
• Design > Button > Button Text Color = #ffffff (HOVER = #7cda24)
• Design > Button > Button Background Color = #7cda24
• Design > Button > Button Border Width = 1px
• Design > Button > Button Border Color = #7cda24
• Design > Button > Button Border Radius = 0px
• Show Button Icon = Yes (pick your icon)
• Design > Button > Button Icon Color = #ffffff (HOVER = #7cda24)
• Design > Button > Button Icon Placement = Left
• Design > Button > Only Show Icon On Hover for Button = No

Design > Spacing >

• Design > Spacing > Padding Left = 25px

Design > Box Shadow >

• Design > Box Shadow > Box Shadow Horizontal Position = 0px
• Design > Box Shadow > Box Shadow Vertical Position = 0px (HOVER = -50px)
• Design > Box Shadow > Box Shadow Blur Strength = 0px
• Design > Box Shadow > Box Shadow Spread Strength = 0px
• Design > Box Shadow > Shadow Color = #ffffff
• Design > Box Shadow > Box Shadow Position = Inner Shadow

Advanced > Transition >

• Advanced > Transition > Transition Duration = 200ms
• Advanced > Transition > Transition Speed Curve = Ease-Out

5. How to create the arrow tab button

This button has a solid blue box shadow positioned on the left of the button with a button arrow icon aligned flush to its right. As the mouse hovers over the button the shadow is extended to cover the arrow icon.

To create this button you will need to use the following settings in the Divi button module;

Design > Button >

• Design > Button > Use Custom Styles for Button = Yes
• Design > Button > Button Text Color = #ffffff
• Design > Button > Button Background Color = #43caef
• Design > Button > Button Border Width = 0px
• Show Button Icon = Yes (pick your icon)
• Design > Button > Button Icon Color = #2288e2
• Design > Button > Button Icon Placement = Left
• Design > Button > Only Show Icon On Hover for Button = No

Design > Spacing >

• Design > Spacing > Padding Left = 40px
• Design > Spacing > Padding Right = 20px

Design > Box Shadow >

• Design > Box Shadow > Box Shadow Horizontal Position = 32px  (HOVER = 22px)
• Design > Box Shadow > Box Shadow Vertical Position = 0px
• Design > Box Shadow > Box Shadow Blur Strength = 0px
• Design > Box Shadow > Box Shadow Spread Strength = 0px
• Design > Box Shadow > Shadow Color = #2288e2
• Design > Box Shadow > Box Shadow Position = Inner Shadow

Advanced > Transition >

• Advanced > Transition > Transition Speed Curve = Ease-In-Out

Download the free layout for all 5 Divi buttons

If you are having trouble getting your Divi buttons to work on your site or just want them on your site ASAP, you can download the Divi layout .JSON file with all 5 buttons built and ready to load into your Visual Builder in seconds.

download the .json layout file here

To use this free Divi .json layout you will need to;

1. Unzip the file to access the .JSON file 5 Divi Buttons DTE
2. Then just Drag & Drop the .json file into your front-end Visual Builder OR click on the Portability icon (the up/down arrows) if using the back-end builder.