Trash Compactor
Click and the entire button squashes vertically like a trash compactor crushing it into nothing. A satisfying physical metaphor for dismissal.
Trash Compactor the 7th of 18 designs in the 18 CSS Close Buttons collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="ccb-compact" aria-label="Close"><span></span><span></span></button>
.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; } document.querySelectorAll('.ccb-compact').forEach(function(btn) {
btn.addEventListener('click', function() {
btn.classList.add('is-crushed');
setTimeout(function() { btn.classList.remove('is-crushed'); }, 800);
});
});