18 CSS Close Buttons
Advertisement
A CSS close button is the small dismissal control that closes a modal, dialog, toast, or panel. These 18 hand-coded designs are ready-to-ship close controls for any overlay or banner — copy the markup, wire your dismiss handler, and ship.
01 / 18
Origami Crease
Pure CSS 
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.
02 / 18
Lock Tumble
CSS + JS 
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.
03 / 18
Rotate Out
Pure CSS 
A timeless close button — the X rotates 90° and the chrome scales up subtly on hover. The benchmark every dismiss button is measured against.
04 / 18
Magnetic Cross
Pure CSS 
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.
05 / 18
Liquid Pop
Pure CSS 
The circular blob morphs into a soft squashed pill on hover, then springs back releasing a tighter X. Feels rubbery and alive.
06 / 18
Glitch Cross
Pure CSS 
RGB-split glitch shudders across the X every few seconds — a constant micro-twitch that screams sci-fi UI panel.
07 / 18
Trash Compactor
CSS + JS 
Click and the entire button squashes vertically like a trash compactor crushing it into nothing. A satisfying physical metaphor for dismissal.
08 / 18
Inkwell Ripple
CSS + JS 
Click triggers a dark ink drop that ripples outward and swallows the X for a moment. The X re-emerges when the ink drains.
09 / 18
Particle Burst
CSS + JS 
On click, eight small dots fan out radially from the centre and fade — the X dissolves into particles. CSS-driven, fully animated.
10 / 18
Snap Cross
Pure CSS 
Two diagonal bars fly in from off-button and snap together with an overshoot bounce on first paint. Perfect for things that just appeared.
11 / 18
Neon Etch
Pure CSS 
An outlined neon X sits inside a transparent ring with a slow breathing glow — built for dark dashboards and admin panels.
12 / 18
Ribbon Tag
Pure CSS 
Looks like a removable label/sticker — the X is integrated into a tag-shaped chrome with a notched left edge. Perfect for filter chips.
13 / 18
Fold Away
Pure CSS 
On hover the button physically folds away on its Y-axis like a closing book — 3D rotateY with perspective for a tactile dismissal.
14 / 18
Hold to Confirm
CSS + JS 
A safety net for destructive actions — press and hold for 800ms while the ring fills clockwise, release early to cancel. Releases on full ring.
15 / 18
Toast Dismiss
CSS + JS 
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.
16 / 18
Modal Corner
Pure CSS 
A larger absolute-positioned corner X — the kind you put on lightboxes and image galleries. Hover leaves a soft purple trail behind the cursor.
17 / 18
Brutalist Stamp
Pure CSS 
A bold offset-shadow stamp button straight from the brutalist playbook — hard edges, monospace label "DISMISS", press collapses into the shadow.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is the correct HTML for a CSS close button?
Use a real button element with type='button' and an accessible name — either aria-label='Close' or visually-hidden text inside the button. Do not use a div or a bare span for a close (X) button: a button is keyboard-focusable, fires on Enter and Space, and is announced as a button by screen readers. The X glyph itself should be decorative (a pseudo-element or an aria-hidden icon) so assistive tech reads 'Close', not the character.
How do I make a pure CSS close (X) button without an icon font or image?
Draw the cross with two pseudo-elements. Give the button position: relative, then add ::before and ::after as thin bars (for example width: 2px, height: 60%) absolutely centred, and rotate one 45deg and the other -45deg. This gives a crisp, scalable X with zero dependencies — no SVG, no icon font, no background image. Most of the 18 demos here build the X exactly this way.
Are these CSS close buttons accessible?
Yes. Every demo uses a real button element with an accessible name, visible :focus-visible styling for keyboard users, and aria-hidden on the decorative X glyph. Interactive variants such as Hold to Confirm expose their state, and continuous animations honour the prefers-reduced-motion media query so motion-sensitive users get a calm fallback.
Do these close buttons need JavaScript?
Most don't — 12 of the 18 are pure CSS, using :hover, :active, transitions and pseudo-elements for the whole effect. Six patterns (such as Hold to Confirm, Toast Dismiss and Particle Burst) include a small, self-contained vanilla JS snippet in the JS tab of the code panel for behaviour CSS alone can't do, like a confirm delay or removing the dismissed element.
Where should a close button go on a modal or toast?
Place it in the top-right corner of the dialog or toast, inside the same container, so it is the obvious dismiss control. Keep the hit area at least 24x24px (44x44px is better on touch), give it a clear hover and focus state, and make sure Escape also closes the modal — the button and the Escape key should do the same thing.
Can I use these close buttons in React, Vue or any framework?
Yes. Each demo is plain HTML and CSS (with optional vanilla JS) — no dependencies and no build step. Drop the markup into React (use className), Vue, Svelte, Astro or static HTML and the styles work unchanged. Everything is MIT licensed and free to use commercially.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive