6 Pure CSS2 with JSPublished 2026-10-04Free · no sign-up
Eight close and dismiss buttons: a CSS-drawn X, a button that rotates on hover, a labelled Close with an Esc hint, a dismissible card that manages focus, a size and style set, a toast close, removable chips and a close button that stays visible over photos.
A round close button whose X is drawn with two rotated pseudo-element bars, so it stays crisp at any size. It is a real button with aria-label="Close", has a 40 pixel hit area for touch, and shows a clear focus ring.
A close button that spins a quarter turn on hover and focus, a small touch of motion that signals it is interactive. The rotation is a transform on the whole button, and it is turned off for people who prefer reduced motion.
An X icon paired with the visible word Close, which is clearer than an icon alone, especially in large overlays. The text doubles as the accessible name, and the keyboard shortcut Esc is shown as a hint in a kbd element.
View code
<button class="x3"><span aria-hidden="true">×</span> Close <kbd>Esc</kbd></button>
A promotional card with a close button in the corner that removes it. After dismissal, focus moves to a nearby heading so keyboard users are not left on a removed element, and a polite message confirms the card was hidden.
View code
<div class="dcw">
<h2 id="dc-h" tabindex="-1">Your dashboard</h2>
<aside class="dc" aria-labelledby="dc-t">
<button class="dcx" aria-label="Dismiss tip">×</button>
<h3 id="dc-t">Tip: connect your domain</h3>
<p>Shops with their own domain get more repeat visitors.</p>
</aside>
<p class="msg" role="status"></p>
</div>
Small, medium and large close buttons in ghost, soft and solid styles from one base class. The icon scales with the button through a custom property, and even the small size keeps a 32 pixel hit area by using padding.
A success toast with a small close button aligned to the top right. The button's name says what it closes, Dismiss notification, which is more helpful than a bare Close when several messages are on screen at once.
View code
<div class="tst" role="status">
<span class="ic" aria-hidden="true">✓</span>
<p><b>Payment sent</b><br>$420 is on its way to your bank.</p>
<button aria-label="Dismiss notification" onclick="this.parentElement.remove()">×</button>
</div>
A tag with a tiny circular remove button inside it, as used for selected filters and email recipients. The button is named Remove followed by the tag text, and the chip can be removed with a single click or by pressing Enter on the button.
A close button placed over a busy image, as in lightboxes and video players. A semi-opaque dark disc with a white border keeps the X visible on both light and dark parts of the picture, so contrast never depends on the photo.
View code
<figure class="ovl">
<div class="pic" role="img" aria-label="Sunlit beach with white sand"></div>
<button aria-label="Close image">×</button>
<figcaption>Morning at the bay</figcaption>
</figure>
A close control must be a <button> with an accessible name. For an icon-only X use aria-label, ideally saying what it closes, such as Dismiss notification.
Big enough to hit
The X can be small but the button should be at least 32 to 44 pixels across. Padding increases the target without making the icon larger.
Where does focus go?
When a closed element disappears, focus must move somewhere sensible, such as the heading above it or the button that opened it, or keyboard users are left on nothing.
Over images
On photos use a dark translucent disc with a light ring, so the X keeps its contrast on both light and dark parts of the picture.
Frequently asked questions
Should I write Close or use an X?
A visible word is clearest; an X with a good aria-label is fine where space is tight.
Which demos need JavaScript?
The card, toast and chips, to remove elements. The buttons themselves are CSS.
Is the multiplication sign a good X?
It reads as times in some screen readers, so always add an aria-label.