Creative Button

Creative Button is a Divi button with motion built in. Pick a hover effect and tune its color, speed, and easing. Every effect also runs on keyboard focus, so nothing is mouse-only. This module works in Divi 5.

How to add the Creative Button module

1. Add a section and row, then add the Creative Button module.
2. Enter the button text and link.
3. Choose a hover effect and set its color and speed.

Content

Button

• Button Text and the link. Clear the text to hide the button.

Effect

• Hover Effect: None, Fill Up (default), Fill From Left, Fill Diagonally, Sweep In, Shutter (horizontal), Shutter (vertical), Radial Out, Draw Border, Shine, or Slide Up Text.
• Hover Text: The second label that slides in with the Slide Up Text effect. The button's real label stays in the page for screen readers.

Layout

• Alignment: Left, Center (default), or Right.
• Full Width: Off by default. Stretches the button across the column.

Design

Effect

• Effect Color: The color of the shape that moves across the button on hover. Default #2b87da.
• Text Color On Hover: The label color once the effect covers the button. Default #ffffff. Set it so the text stays readable against the effect color.
• Effect Speed: Default 350ms. Visitors who ask their device for reduced motion do not get the animation.
• Effect Easing: Ease (default), Ease In, Ease Out, Ease In Out, Linear, Smooth, or Overshoot.

Button

• The standard Divi button options style the resting state.

Tip

Pick one effect and reuse it across the site. A single consistent motion reads as a design decision, while a different effect on every button reads as noise.