18 CSS Close Buttons

css-only interactive

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.

18 unique buttons 12 Pure CSS 6 CSS + JS 100% copy-paste ready Published May 4, 2026

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.

Live Demo Try it

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.

Live Demo Try it

03 / 18

Rotate Out

Pure CSS

A timeless close button — the X rotates 90° and the chrome scales up subtly on hover.

Live Demo Try it

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.

Live Demo Try it

05 / 18

Liquid Pop

Pure CSS

The circular blob morphs into a soft squashed pill on hover, then springs back releasing a tighter X.

Live Demo Try it

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.

Live Demo Try it

07 / 18

Trash Compactor

CSS + JS

Click and the entire button squashes vertically like a trash compactor crushing it into nothing.

Live Demo Try it

08 / 18

Inkwell Ripple

CSS + JS

Click triggers a dark ink drop that ripples outward and swallows the X for a moment.

Live Demo Try it

09 / 18

Particle Burst

CSS + JS

On click, eight small dots fan out radially from the centre and fade — the X dissolves into particles.

Live Demo Try it

10 / 18

Snap Cross

Pure CSS

Two diagonal bars fly in from off-button and snap together with an overshoot bounce on first paint.

Best forthings that just appeared.

Live Demo Try it

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.

Live Demo Try it

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.

Best forfilter chips.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

16 / 18

Modal Corner

Pure CSS

A larger absolute-positioned corner X — the kind you put on lightboxes and image galleries.

Live Demo Try it

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.

Live Demo Try it

18 / 18

Galaxy Vortex

Pure CSS

A conic-gradient vortex swirls slowly behind the X at rest, then accelerates dramatically on hover — the ultimate premium "this is special" close button.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Transform Generator

Rotate-on-hover is the most-loved variant.

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 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 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

27 CSS Calendar Designs

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

css calendar css calendar design css calendar widget Responsive