Creative Button
The core Button block has a fill and an outline style and changes colour on hover. This block brings 33 hover effects — fills, sliding and swapping icons, text effects, shape effects, a shine, a pulse ring and a border that draws itself — with nine colour presets, five sizes, “start filled”, an optional icon and a magnetic pull. Every effect also plays on keyboard focus, and everything is CSS except the optional magnetic pull.
Ready-made patterns
Inserter → Patterns → Moduly.
Ready when you are
Tell us about your idea and get a plan, a price and a date within two days.
Pick your plan
Fill
Hover or Tab to each button.
Fade in
Fill down
Fill right
Open horizontally
Diagonal cross
Open vertically
Sliding icon
Hover or Tab to each button.
Icon in from the right
Icon in from the left
Icon fades in right
Icon fades in left
Text ↔ icon swap
Hover or Tab to each button.
Icon drops in
Icon rises in
Icon from the left
Icon from the right
Text effects
Hover or Tab to each button.
Winona
Rayen
Aylen
Wapasha
Nina
Antiman
Sacnite
Shape effects
Hover or Tab to each button.
Exploit
Upward
Newbie
Render
Reshape
Expandable
Downhill
Bloom
Roundup
More
Hover or Tab to each button.
Shine sweep
Pulse ring
Border draws around
Nine colour presets
indigo
pink
black
offwhite
cranberry
purple
emerald
amber
White, for dark backgrounds
Sizes, filled and icons
Extra small → extra large
Start filled (colours swap on hover)
Icon beside the text, before and after
Full width · shadow on hover
Centred · min width 260 · radius 0 · border 3
Slow (1200 ms) · pill radius 40
Roundup · 160 px · stroke 3
Block typography: serif, uppercase, 18 px
No link (a span) · custom accessible name
Custom colours
Magnetic pull
Move the mouse near these buttons — they lean toward the pointer (not on touch screens or with reduced motion).