Button playground
Thirty button types, from subtle to pure fun: sliding icons, glowing borders, jelly, glitch, liquid, 8-bit and ten more that move even at rest. Set the colour, corner radius and speed, click through all the states and copy the ready CSS.
#FF7A2E
Background
Character of motion
Show
Show state
Hover with the mouse, move with the Tab key or click. After a click the button goes through the Loading and Done states.
01 · Fill from the left
On hover the colour spreads from left to right. Works well as a main action that does not shout at rest.
02 · Circle from the centre
The colour grows from the centre like a drop. Softer and more playful than the fill from the left.
03 · Sliding arrow
The text moves aside and an arrow arrives from the right. A classic for “next step” in forms and wizards.
04 · Icon instead of text
The text slides up and an icon arrives from below. Good when the action is clear, for example downloading a file.
05 · Drawn border
On hover a line is drawn around the button. A subtle variant for secondary actions and portfolios.
06 · Glow
An outline button lights up on hover. Fits dark sites, game and event pages.
07 · Orbiting border
A colour gradient runs around the border. Bold, so only once per page, for example for the main offer.
08 · Physical press
The button has “depth” and is pushed in on click. Tactile, popular in apps and games.
09 · Lift
The button lifts and casts a shadow. Unobtrusive and clean, fits cards and listings.
10 · Text with underline
No background, only the underline grows from the centre and the arrow hops. For less important links and “show all”.
11 · Shine
A shine sweeps across the button like on polished metal. A premium feel without loud colours.
12 · Flowing gradient
A three-colour gradient flows to the other side on hover. The colours are calculated from the chosen colour.
13 · Sliding doors
Two halves of colour arrive from both sides and meet in the middle. Suits entering a section or an app.
14 · Sonar
Waves spread from the button at rest like from a sonar. For “live”, new features or one main call to action. Never more than one per page.
15 · Jelly
On hover the button wobbles like jelly. Pure joy, fits games, quizzes and children’s sites.
16 · Neobrutalism
A strong outline and a hard shadow without blur. On click the button “snaps” into the shadow. Trendy, cheeky and very readable.
17 · Glitch
On hover the text shakes and splits into two colours like a broken monitor. For music, games and techno events.
18 · Liquid
On hover the button fills with a wavy liquid. Playful, for campaigns, drinks or charity.
19 · Warning stripes
Diagonal stripes start moving on hover like on a building site. For “coming soon”, contests or countdowns.
20 · 8bit
Checkered corners, movement in jumps and a push-in like on a vending machine. It takes no rounding; retro has pixel corners.
21 · Aurora
Colours slowly flow back and forth and a blurred glow shines through under the button. Lively, but calm.
22 · Marching ants
A dashed border keeps circling like a selection in a graphics editor. Fits file uploads and selection.
23 · Floating
The button floats lightly and the shadow beneath it breathes. On hover it stops, as if the cursor had caught it.
24 · Breathing
The glow around the button slowly grows and fades like breath. A calm invitation that does not disturb reading.
25 · Nudge
Every four seconds it wiggles briefly, as if reminding you that something is waiting. For unfinished steps.
26 · Lava lamp
Blurred drops of colour slowly blend inside. Atmospheric, for music, festivals and parties.
27 · Occasional flash
Every few seconds a coloured shine sweeps across the button by itself. It catches attention but does not disturb constantly.
28 · Beckoning arrow
The arrow keeps gently peeking to the right and speeds up on hover. It leads to the next step or a scroll down.
29 · Blinking cursor
A cursor blinks after the text like in a terminal. Fits developer and tech sites, like this one.
30 · Flowing text
The background stays calm, but a colour gradient keeps flowing through the letters. On hover the flow speeds up.
States every button should have
:default
Default
It must be clear it can be clicked. Enough contrast and a size of at least 44 × 44 px.
:hover
Hover
A subtle change that confirms the element responds. It does not exist on mobile.
:focus-visible
Focus
A prominent outline for keyboard control. Never remove it without a replacement.
:active
Press
An instant response to a click, for example a slight shrink.
aria-busy
Loading
A progress indicator and blocking against double submission.
success / error
Result
A short confirmation, or a clear error with advice on what to do next.
:disabled
Disabled
Only when it makes sense, and with an explanation of why it is not possible now.
How much animation is just right
For hover and press 150–300 ms, for bigger movements (fill, sliding icon) up to 400 ms. Longer animations feel lazy and the user waits for the button instead of the button waiting for them.
An icon should not replace text
A sliding arrow or icon is a bonus. The main information must stay in the text; not everyone knows what an icon alone means, and screen readers do not read it out.
Think of the keyboard and reduced motion
The focus state is for people who control the web with a keyboard; never hide it. And when someone has reduced motion turned on in their system, effects should switch off. The exported CSS handles both.