01
Morphing X
A plus that morphs and spins into an X on hover, and presses in on click. The classic 'close' with personality.
// FREE TOOLSView all →
◈Keyword ResearchFreeReal Google + Bing suggestions, grouped by intent.
▣Meta & SERP PreviewsoonSee how your page looks in Google, fix title & description.
◐AI Visibility ChecksoonWhat AI assistants say about your brand.
❖Schema GeneratorsoonCopy-paste JSON-LD for FAQ, Article, Product & more.
// CLOSE BUTTONS
Close buttons worth clicking
Five animated close (X) buttons, morphing, dissolving, magnetic and more. Hover and click each one, then copy the React and Tailwind code. No dependencies, free for any UI.
Why the close button matters
The close button is one of the most-used controls in any interface, on modals, toasts, banners and drawers. A tiny, thoughtful animation on dismiss makes the whole product feel considered, while keeping the control obvious and accessible. Each button below uses a real, labelled button element so it stays keyboard and screen-reader friendly.
02
Liquid Dissolve
An X made of dots that scatter apart on hover then snap back, like it's dissolving and reforming.
03
Rotating Ring
An X ringed by an SVG circle that draws itself and spins on hover, with a gradient stroke.
04
Magnetic X
The X is magnetically pulled toward your cursor, with a glow that follows the pointer. Snaps back on leave.
05
Draw-In X
The two strokes of the X draw themselves in on hover, like being sketched, using SVG stroke-dash.
Frequently asked questions
Are these close buttons free?+
Yes. Copy the code under any design into your own projects, including commercial ones.
Are they accessible?+
Each uses a real button with an aria-label of 'close', so screen readers announce it correctly and it's keyboard-focusable.
Do they need any libraries?+
No. Every design is React plus Tailwind with pure CSS or SVG animation, and no external dependencies.
Where should I use them?+
Modals, dialogs, toasts, drawers, banners, anywhere you need a dismiss control. Pick the animation that fits your product's tone.
Do they work in a modal or drawer?+
Yes. Drop the button into your modal or drawer header and wire its onClick to your close handler. The animation is purely visual, so it doesn't affect how you manage open state.
Need a custom UI for your product?
These micro-interactions are the kind of details I build into every project. Built by Saurabh Bhayana, web developer and SEO specialist.
Let's talk →