Playground · 18 demos
CSS Close Buttons Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Close Buttons collection for the gallery view with code panels.
01 Pure CSS
Origami Crease
The X is rendered as two thin paper-fold creases — on hover the button collapses inward via clip-path like an origami fold, leaving a tight diamond that vanishes.
Open
02 CSS + JS
Lock Tumble
A padlock chrome with a shackle that tumbles open on click — the X aligns into the lock body as it unlocks. Premium choice for "remove from saved" and "unlock to dismiss" flows.
Open
03 Pure CSS
Rotate Out
A timeless close button — the X rotates 90° and the chrome scales up subtly on hover. The benchmark every dismiss button is measured against.
Open
04 Pure CSS
Magnetic Cross
Two stubby horizontal bars sit apart at rest — on hover they magnetically pull toward each other and snap into a perfect X. Hyper-clean micro-interaction.
Open
05 Pure CSS
Liquid Pop
The circular blob morphs into a soft squashed pill on hover, then springs back releasing a tighter X. Feels rubbery and alive.
Open
06 Pure CSS
Glitch Cross
RGB-split glitch shudders across the X every few seconds — a constant micro-twitch that screams sci-fi UI panel.
Open
07 CSS + JS
Trash Compactor
Click and the entire button squashes vertically like a trash compactor crushing it into nothing. A satisfying physical metaphor for dismissal.
Open
08 CSS + JS
Inkwell Ripple
Click triggers a dark ink drop that ripples outward and swallows the X for a moment. The X re-emerges when the ink drains.
Open
09 CSS + JS
Particle Burst
On click, eight small dots fan out radially from the centre and fade — the X dissolves into particles. CSS-driven, fully animated.
Open
10 Pure CSS
Snap Cross
Two diagonal bars fly in from off-button and snap together with an overshoot bounce on first paint. Perfect for things that just appeared.
Open
11 Pure CSS
Neon Etch
An outlined neon X sits inside a transparent ring with a slow breathing glow — built for dark dashboards and admin panels.
Open
12 Pure CSS
Ribbon Tag
Looks like a removable label/sticker — the X is integrated into a tag-shaped chrome with a notched left edge. Perfect for filter chips.
Open
13 Pure CSS
Fold Away
On hover the button physically folds away on its Y-axis like a closing book — 3D rotateY with perspective for a tactile dismissal.
Open
14 CSS + JS
Hold to Confirm
A safety net for destructive actions — press and hold for 800ms while the ring fills clockwise, release early to cancel. Releases on full ring.
Open
15 CSS + JS
Toast Dismiss
A fully-fledged toast notification with an X — clicking slides the toast off-canvas to the right while fading, the way a real production toast behaves.
Open
16 Pure CSS
Modal Corner
A larger absolute-positioned corner X — the kind you put on lightboxes and image galleries. Hover leaves a soft purple trail behind the cursor.
Open
17 Pure CSS
Brutalist Stamp
A bold offset-shadow stamp button straight from the brutalist playbook — hard edges, monospace label "DISMISS", press collapses into the shadow.
Open
18 Pure CSS
Galaxy Vortex
A conic-gradient vortex swirls slowly behind the X at rest, then accelerates dramatically on hover — the ultimate premium "this is special" close button.
Open