18 CSS Close Button Examples — Free Code & Live Demos

18 hand-coded CSS close buttons — magnetic cross, liquid pop, glitch, ink ripple, particle burst, hold-to-confirm, origami, lock tumble and more. Every demo is unique, accessible, and copy-paste ready.

18 unique buttons 12 Pure CSS 6 CSS + JS 0 dependencies 100% copy-paste ready

01 / 18

Origami Crease

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

.ccb-origami {
  width: 40px; height: 40px;
  border: none;
  background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 50%, #d4ccff 51%, #c4b8ff 100%);
  position: relative; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.45s cubic-bezier(0.65,0,0.35,1), transform 0.45s;
  box-shadow: 0 2px 6px rgba(60,40,140,0.2), inset -1px -1px 0 rgba(0,0,0,0.04);
}
.ccb-origami span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 1.5px;
  background: #1a1a2e; border-radius: 1px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.6);
}
.ccb-origami span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-origami span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-origami:hover {
  clip-path: polygon(50% 12%, 88% 50%, 50% 88%, 12% 50%);
  transform: rotate(45deg) scale(0.9);
}
.ccb-origami:active {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transform: rotate(90deg) scale(0.6);
}

<button class="ccb-origami" aria-label="Close"><span></span><span></span></button>

02 / 18

Lock Tumble

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

.ccb-lock {
  width: 40px; height: 48px;
  border: none; background: transparent;
  position: relative; cursor: pointer;
  padding: 0;
}
.ccb-lock-shackle {
  position: absolute; top: 4px; left: 50%;
  width: 20px; height: 18px;
  border: 2.5px solid #f5a623;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s;
  transform-origin: bottom right;
}
.ccb-lock-body {
  position: absolute; bottom: 0; left: 50%;
  width: 30px; height: 26px;
  background: #f5a623;
  border-radius: 5px;
  transform: translateX(-50%);
  transition: background 0.3s;
}
.ccb-lock-x1, .ccb-lock-x2 {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #1a1a2e; border-radius: 1px;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-lock-x1 { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-lock-x2 { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-lock.is-open .ccb-lock-shackle {
  transform: translateX(-50%) rotate(40deg) translate(4px,-2px);
  border-color: #2ecc8a;
}
.ccb-lock.is-open .ccb-lock-body { background: #2ecc8a; }
.ccb-lock.is-open .ccb-lock-x1 { transform: translate(-50%,-50%) rotate(0deg)  scaleX(1.1); }
.ccb-lock.is-open .ccb-lock-x2 { transform: translate(-50%,-50%) rotate(90deg) scaleX(1.1); }
.ccb-lock:hover .ccb-lock-shackle { border-color: #fbbf24; }

<button class="ccb-lock" aria-label="Unlock and close"><span class="ccb-lock-shackle"></span><span class="ccb-lock-body"><span class="ccb-lock-x1"></span><span class="ccb-lock-x2"></span></span></button>

document.querySelectorAll('.ccb-lock').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.toggle('is-open');
  });
});

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.

.ccb-rotate {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
  transition: background 0.2s, transform 0.3s;
}
.ccb-rotate span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f0eeff; border-radius: 2px;
  transform-origin: center;
}
.ccb-rotate span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-rotate span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-rotate:hover {
  background: rgba(255,108,138,0.18);
  transform: rotate(90deg) scale(1.08);
}
.ccb-rotate:hover span { background: #ff6c8a; }

<button class="ccb-rotate" aria-label="Close"><span></span><span></span></button>

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.

.ccb-magnet {
  width: 38px; height: 38px;
  border: 1px solid rgba(124,108,255,0.3);
  border-radius: 8px;
  background: #17171f;
  position: relative; cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.ccb-magnet span {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 2px;
  background: #7c6cff; border-radius: 2px;
  transition: width 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-magnet span:nth-child(1) { transform: translate(-130%,-50%) rotate(0deg); }
.ccb-magnet span:nth-child(2) { transform: translate(30%,-50%)   rotate(0deg); }
.ccb-magnet:hover { border-color: #7c6cff; background: rgba(124,108,255,0.08); }
.ccb-magnet:hover span { width: 16px; }
.ccb-magnet:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-magnet:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }

<button class="ccb-magnet" aria-label="Close"><span></span><span></span></button>

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.

.ccb-liquid {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  position: relative; cursor: pointer;
  transition: border-radius 0.4s cubic-bezier(0.68,-0.55,0.27,1.55), transform 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-liquid span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-liquid:hover { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: scale(0.92); }
.ccb-liquid:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scaleX(1.15); }
.ccb-liquid:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scaleX(1.15); }

<button class="ccb-liquid" aria-label="Close"><span></span><span></span></button>

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.

.ccb-glitch {
  width: 38px; height: 38px;
  border: 1px solid rgba(46,204,138,0.3);
  background: #0c0c12;
  font-size: 16px; font-weight: 700;
  cursor: pointer; position: relative;
  color: #2ecc8a;
}
.ccb-g-x { position: relative; z-index: 1; }
.ccb-glitch::before, .ccb-glitch::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.ccb-glitch::before { color: #ff6c8a; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: ccb-gl-t 2.4s infinite steps(2); }
.ccb-glitch::after  { color: #7c6cff; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); animation: ccb-gl-b 2.4s infinite steps(2); }
.ccb-glitch:hover::before, .ccb-glitch:hover::after { animation-duration: 0.3s; }
@keyframes ccb-gl-t { 0%,90% { transform: translateX(0); } 92% { transform: translateX(-3px); } 94% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes ccb-gl-b { 0%,90% { transform: translateX(0); } 92% { transform: translateX(3px);  } 94% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

<button class="ccb-glitch" aria-label="Close"><span class="ccb-g-x">✕</span></button>

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.

.ccb-compact {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(180deg, #2a2a3e, #1a1a28);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.55,0,0.45,1), opacity 0.35s;
  transform-origin: center bottom;
}
.ccb-compact span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f0eeff; border-radius: 2px;
}
.ccb-compact span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-compact span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-compact.is-crushed { transform: scaleY(0.08) scaleX(1.3); opacity: 0; }

<button class="ccb-compact" aria-label="Close"><span></span><span></span></button>

document.querySelectorAll('.ccb-compact').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.add('is-crushed');
    setTimeout(function() { btn.classList.remove('is-crushed'); }, 800);
  });
});

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.

.ccb-ink {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #f0eeff;
  position: relative; cursor: pointer;
  overflow: hidden;
}
.ccb-ink span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #1a1a28; border-radius: 2px;
  z-index: 2;
  transition: background 0.3s;
}
.ccb-ink span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-ink span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-ink-drop {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: #1a1a28; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 1; pointer-events: none;
}
.ccb-ink.is-poured .ccb-ink-drop { animation: ccb-ink-pour 0.9s ease-out forwards; }
.ccb-ink.is-poured span { background: #f0eeff; }
@keyframes ccb-ink-pour {
  0%   { transform: translate(-50%,-50%) scale(0); }
  40%  { transform: translate(-50%,-50%) scale(8); }
  60%  { transform: translate(-50%,-50%) scale(8); }
  100% { transform: translate(-50%,-50%) scale(0); }
}

<button class="ccb-ink" aria-label="Close"><span></span><span></span></button>

document.querySelectorAll('.ccb-ink').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-poured')) return;
    var drop = document.createElement('span');
    drop.className = 'ccb-ink-drop';
    btn.appendChild(drop);
    btn.classList.add('is-poured');
    setTimeout(function() {
      btn.classList.remove('is-poured');
      drop.remove();
    }, 900);
  });
});

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.

.ccb-burst {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #ff6c8a;
  box-shadow: 0 4px 18px rgba(255,108,138,0.4);
  position: relative; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ccb-burst:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(255,108,138,0.55); }
.ccb-burst-x {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: opacity 0.15s;
}
.ccb-burst-x:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-burst-x:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-burst.is-burst .ccb-burst-x { opacity: 0; }
.ccb-burst-particle {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px;
  background: #fff; border-radius: 50%;
  pointer-events: none;
  animation: ccb-particle 0.7s ease-out forwards;
}
@keyframes ccb-particle {
  0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateX(0)    scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--a)) translateX(28px) scale(0); opacity: 0; }
}

<button class="ccb-burst" aria-label="Close"><span class="ccb-burst-x"></span><span class="ccb-burst-x"></span></button>

document.querySelectorAll('.ccb-burst').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-burst')) return;
    btn.classList.add('is-burst');
    for (var i = 0; i < 8; i++) {
      var p = document.createElement('span');
      p.className = 'ccb-burst-particle';
      p.style.setProperty('--a', (i * 45) + 'deg');
      btn.appendChild(p);
      (function(node) { setTimeout(function() { node.remove(); }, 700); })(p);
    }
    setTimeout(function() { btn.classList.remove('is-burst'); }, 700);
  });
});

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.

.ccb-snap {
  width: 38px; height: 38px;
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 8px;
  background: rgba(245,166,35,0.12);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.2s;
}
.ccb-snap:hover { background: rgba(245,166,35,0.22); }
.ccb-snap span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f5a623; border-radius: 2px;
  animation: ccb-snap-in 0.7s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
.ccb-snap span:nth-child(1) { animation-name: ccb-snap-tl; }
.ccb-snap span:nth-child(2) { animation-name: ccb-snap-tr; animation-delay: 0.05s; }
@keyframes ccb-snap-tl {
  0%       { transform: translate(-300%,-300%) rotate(45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(45deg); opacity: 1; }
}
@keyframes ccb-snap-tr {
  0%       { transform: translate(200%,-300%)  rotate(-45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(-45deg); opacity: 1; }
}

<button class="ccb-snap" aria-label="Close"><span></span><span></span></button>

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.

.ccb-neon {
  width: 40px; height: 40px;
  border: 1.5px solid #2ecc8a;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 8px rgba(46,204,138,0.35), inset 0 0 8px rgba(46,204,138,0.15);
  position: relative; cursor: pointer;
  animation: ccb-neon-breathe 2.4s ease-in-out infinite;
  transition: transform 0.2s;
}
.ccb-neon:hover { transform: scale(1.1); }
.ccb-neon span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #2ecc8a;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(46,204,138,0.7);
}
.ccb-neon span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-neon span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
@keyframes ccb-neon-breathe {
  0%,100% { box-shadow: 0 0 8px  rgba(46,204,138,0.35), inset 0 0 8px  rgba(46,204,138,0.15); }
  50%      { box-shadow: 0 0 18px rgba(46,204,138,0.7),  inset 0 0 14px rgba(46,204,138,0.3); }
}

<button class="ccb-neon" aria-label="Close"><span></span><span></span></button>

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.

.ccb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 18px;
  border: none;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  transition: background 0.2s, color 0.2s;
}
.ccb-tag:hover { background: rgba(124,108,255,0.3); color: #fff; }
.ccb-tag-x {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-block;
  transition: background 0.2s;
}
.ccb-tag-x::before, .ccb-tag-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.ccb-tag-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-tag-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-tag:hover .ccb-tag-x { background: rgba(255,255,255,0.3); }

<button class="ccb-tag" aria-label="Remove tag">React<span class="ccb-tag-x"></span></button>

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.

.ccb-fold {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  position: relative; cursor: pointer;
  perspective: 200px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.ccb-fold span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  backface-visibility: hidden;
}
.ccb-fold span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-fold span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-fold:hover  { transform: rotateY(75deg); }
.ccb-fold:active { transform: rotateY(180deg); }

<button class="ccb-fold" aria-label="Close"><span></span><span></span></button>

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.

.ccb-hold {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255,108,138,0.12);
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-hold:hover { background: rgba(255,108,138,0.2); }
.ccb-hold-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); pointer-events: none;
}
.ccb-hold-ring circle {
  fill: none; stroke: #ff6c8a; stroke-width: 2;
  stroke-dasharray: 113; stroke-dashoffset: 113;
  transition: stroke-dashoffset 0.05s linear;
}
.ccb-hold.is-holding .ccb-hold-ring circle {
  transition: stroke-dashoffset 0.8s linear;
  stroke-dashoffset: 0;
}
.ccb-hold span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #ff6c8a; border-radius: 2px;
}
.ccb-hold span:nth-child(2) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-hold span:nth-child(3) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-hold.is-confirmed { background: rgba(46,204,138,0.25); transform: scale(1.1); }
.ccb-hold.is-confirmed span { background: #2ecc8a; }
.ccb-hold.is-confirmed .ccb-hold-ring circle { stroke: #2ecc8a; }

<button class="ccb-hold" aria-label="Hold to close"><svg viewBox="0 0 40 40" class="ccb-hold-ring"><circle cx="20" cy="20" r="18"/></svg><span></span><span></span></button>

document.querySelectorAll('.ccb-hold').forEach(function(btn) {
  var timer;
  function start() {
    btn.classList.add('is-holding');
    timer = setTimeout(function() {
      btn.classList.remove('is-holding');
      btn.classList.add('is-confirmed');
      setTimeout(function() { btn.classList.remove('is-confirmed'); }, 600);
    }, 800);
  }
  function cancel() {
    clearTimeout(timer);
    btn.classList.remove('is-holding');
  }
  btn.addEventListener('mousedown', start);
  btn.addEventListener('touchstart', start, { passive: true });
  btn.addEventListener('mouseup',    cancel);
  btn.addEventListener('mouseleave', cancel);
  btn.addEventListener('touchend',   cancel);
});

15 / 18

Toast Dismiss

CSS + JS

Saved successfully

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.

.ccb-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px;
  border-radius: 10px;
  background: #1a1a28;
  border: 1px solid rgba(46,204,138,0.25);
  color: #f0eeff; font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.45s cubic-bezier(0.55,0,0.45,1), opacity 0.45s;
}
.ccb-toast.is-out { transform: translateX(120%); opacity: 0; }
.ccb-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc8a; box-shadow: 0 0 8px rgba(46,204,138,0.5);
}
.ccb-toast-msg { white-space: nowrap; }
.ccb-toast-x {
  width: 22px; height: 22px;
  border: none; border-radius: 6px;
  background: transparent;
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-toast-x:hover { background: rgba(255,255,255,0.08); }
.ccb-toast-x span {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: #6b6987; border-radius: 1px;
  transition: background 0.2s;
}
.ccb-toast-x:hover span { background: #f0eeff; }
.ccb-toast-x span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-toast-x span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }

<div class="ccb-toast"><span class="ccb-toast-dot"></span><span class="ccb-toast-msg">Saved successfully</span><button class="ccb-toast-x" aria-label="Dismiss"><span></span><span></span></button></div>

document.querySelectorAll('.ccb-toast').forEach(function(toast) {
  var x = toast.querySelector('.ccb-toast-x');
  if (!x) return;
  x.addEventListener('click', function() {
    toast.classList.add('is-out');
    setTimeout(function() { toast.classList.remove('is-out'); }, 1400);
  });
});

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.

.ccb-corner {
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.25s, border-color 0.25s;
}
.ccb-corner::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(circle at center, rgba(124,108,255,0.4) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.ccb-corner:hover { background: rgba(255,255,255,0.1); border-color: rgba(124,108,255,0.4); }
.ccb-corner:hover::before { opacity: 1; }
.ccb-corner span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #f0eeff; border-radius: 2px;
  z-index: 1;
  transition: background 0.25s, transform 0.3s;
}
.ccb-corner span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-corner span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-corner:hover span { background: #fff; }
.ccb-corner:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg); }
.ccb-corner:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg); }

<button class="ccb-corner" aria-label="Close modal"><span></span><span></span></button>

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.

.ccb-brutalist {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 2px solid #f0eeff;
  border-radius: 0;
  background: #f0eeff;
  color: #111118;
  font-family: monospace; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ccb-brutalist:hover  { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #ff6c8a; }
.ccb-brutalist:active { transform: translate(5px,5px);   box-shadow: 0 0 0 #ff6c8a; }
.ccb-brutalist-x {
  position: relative;
  width: 14px; height: 14px;
  display: inline-block;
}
.ccb-brutalist-x::before, .ccb-brutalist-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2.5px;
  background: #111118;
}
.ccb-brutalist-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-brutalist-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }

<button class="ccb-brutalist" aria-label="Dismiss"><span class="ccb-brutalist-x"></span>DISMISS</button>

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.

.ccb-vortex {
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: #0c0c12;
  position: relative; cursor: pointer; overflow: hidden;
  isolation: isolate;
}
.ccb-vortex::before {
  content: ''; position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #f5a623, #2ecc8a, #06b6d4, #7c6cff);
  animation: ccb-vortex-spin 6s linear infinite;
  z-index: -2;
}
.ccb-vortex::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a28, #0c0c12 70%);
  z-index: -1;
}
.ccb-vortex:hover::before { animation-duration: 1.2s; }
.ccb-vortex span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-vortex span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-vortex span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-vortex:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scale(1.1); }
.ccb-vortex:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scale(1.1); }
@keyframes ccb-vortex-spin { to { transform: rotate(360deg); } }

<button class="ccb-vortex" aria-label="Close"><span></span><span></span></button>

18 CSS Close Buttons

Related collections

22 CSS Button Group Designs

31 CSS Buttons

20 CSS Cards with Animations