Creative Button (Divi)

A button for Divi 5 with 37 hover effects — fills, sliding and swapping icons, text effects, shape effects and more — or a pair of buttons, joined or apart, with an “or” connector. Add sub text, a badge, an attention seeker, a click ripple or a magnetic pull. Hover each button; every label names the settings.

1. The default button and the colour presets

Hover Effect: Exploit (a bubble rises, the text rolls) · Colour Preset · Start Filled swaps the normal and hover colours.

Emerald · Amber · Off white

2. Fills

Six fills that sweep the hover colour in.

Right

Open from the centre (vertical)

3. Sliding and swapping icons

The icon slides or fades in, or swaps with the text. The Icon field picks it (an arrow when empty).

Fades in on the left

Icon slides in from the right

4. Text effects

The label swaps, a panel slides across, curtains drop, a ring grows or closes in, letters cascade, a bubble fills.

Wapasha — ring grows in

5. Shape effects

Bubbles, curtains, wipes, a slanted sweep, a blob, an icon that opens to text, a circle drop, bloom and a circle that draws itself.

Newbie — wipe and roll

Expandable — icon opens to text

Roundup — circle draws

6. More effects

Shine sweep, pulse ring, a border that draws around, and four from the Super Button: animated gradient border, neon glow, 3D press and liquid fill.

Border draws around

Liquid fill

7. Sub text, badge, icon, size and shape

Sub Text below or above · Badge in the corner or beside the button · an icon beside the text, before or after · five sizes · Border Width, Radius, Minimum Width · custom colours · a hover glow · full width per device.

Badge beside the button · icon after

Full width on phones, 260 px minimum elsewhere

8. Two buttons

Buttons: Two buttons · joined into one pill or separate · an “or” connector (text or icon) on the seam · stacked per device · second button first · equal widths · each button has its own effect and colours.

Separate, own effects, equal widths

Side by side on desktop, stacked on phones, centred

Full width pair

9. Attention and interaction

Attention Seeker (pulse ring, heartbeat, shake, bounce, wobble, repeating every few seconds, stopping on hover) · Ripple on Click · Magnetic Pull (reach, strength, the text following further).

Shake

Magnetic pull, 50 %, text follows

10. On a dark background

White preset, neon glow, an animated gradient border and a joined glass-like pair, styled from the Design tab (fonts, spacing).

Neon glow

Joined pair, custom fonts and padding