Creative Button

Make your main buttons stand out so more people click them.

A Divi 5 button, or a joined or separate pair with an “or” connector, with 37 hover effects, nine colour presets, sub text, a badge, attention seekers, a click ripple and a magnetic pull.

Divi 5 module

Requirements

Divi 5.0 or newer (theme or Divi Builder)
WordPress 6.2 or newer
PHP 7.4 or newer
Licence: Pro ($2 / year) — add it to the cart in Moduly

Add it to a page

Open the page in the Divi 5 Visual Builder.
Click + to add a module and search for Creative Button.
Set it up in the Content tab, then style it in the Design tab.

Settings

Button

Setting	What you can set
Buttons	One button or Two buttons (primary and secondary)
Hover Effect	Fill: fade in, Fill: down, Fill: right, Fill: open from the centre (horizontal), Fill: diagonal cross, Fill: open from the centre (vertical), Icon: slides in from the right, Icon: slides in from the left, … (37 in all)
Text	Text
Sub Text	A small second line, e.g. “Free for 14 days”.
Sub Text Position	Below the text or Above the text (store badge style)
Link	Text
Open in a New Tab	On / off
Icon	Used by the icon effects; optional beside the text for the others.
Show Icon Beside the Text	On / off
Icon Position	After or Before
Badge	e.g. New, −20%.
Badge Position	Top corner, overlapping or Beside the button
Button ID	For analytics or anchors. Letters, numbers, dashes.

Second Button

Setting	What you can set
Hover Effect	Same as the first button, Fill: fade in, Fill: down, Fill: right, Fill: open from the centre (horizontal), Fill: diagonal cross, Fill: open from the centre (vertical), Icon: slides in from the right, … (38 in all)
Text	Text
Sub Text	A small second line, e.g. “Free for 14 days”.
Sub Text Position	Below the text or Above the text (store badge style)
Link	Text
Open in a New Tab	On / off
Icon	Used by the icon effects; optional beside the text for the others.
Show Icon Beside the Text	On / off
Icon Position	After or Before
Badge	e.g. New, −20%.
Badge Position	Top corner, overlapping or Beside the button

Layout

Setting	What you can set
Alignment	Left, Center, Right or Full width · Per device.
Two Buttons	Side by side or Stacked · Per device.
Separate Buttons	Leave a gap and round every corner, instead of one joined pill.
Space Between	0–80 · Per device.
Equal Widths	On / off
Second Button First	Swaps the visual order; the reading order stays first button first.
Show Connector	A small “or” badge on the seam between the buttons.
Connector Type	Text or Icon
Connector Text	Text
Connector Icon	Icon picker

Attention & Interaction

Setting	What you can set
Attention Seeker	None, Pulse ring, Heartbeat, Shake, Bounce or Wobble · A small repeating motion that draws the eye. Stops on hover.
Repeat Every (s)	1–12
Ripple on Click	On / off
Magnetic Pull	The button leans toward the pointer. Off on touch screens, for reduced motion and in the builder.
Reach (px)	0–120
Strength (%)	5–100
Text Follows Further	On / off

Design tab: Colours, Second Button Colours, Button Text, Second Button Text, Size & Shape, Icon, Sub Text & Badge, Connector or Text.

Tips

Settings marked Per device can be set separately for desktop, tablet and phone.
Visitors who ask their device for reduced motion get a calmer, still version automatically.

Troubleshooting

Winona, Rayen and Nina draw a copy of the text in a pseudo-element, so sub text is not shown in those three effects.
Spacing set on a button from the Design tab replaces the extra side padding that the sliding-icon effects reserve for the icon.
Joined buttons each keep their own border, so the seam shows a double border when both have one.
Front end looks out of date? Clear Divi's static CSS cache and any page-caching plugin.

Also available for Elementor (Creative Button), Gutenberg (Creative Button).
Works well with: Modal Popup.