<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);
  });
});