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

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

@media (prefers-reduced-motion: reduce) {
  .ccb-ink,
  .ccb-ink * {
    animation: none !important;
  }
}

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