<button class="btn-clay">Confirm</button>

.btn-clay {
  position: relative;
  padding: 18px 40px;
  border: none;
  border-radius: 20px;
  background: #2ecc71;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  box-shadow:
    0 6px 0 #1a7a43,
    0 10px 20px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,255,255,0.2);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-clay:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 9px 0 #1a7a43,
    0 16px 30px rgba(0,0,0,0.35),
    inset 0 2px 4px rgba(255,255,255,0.2);
}
.btn-clay:active {
  transform: translateY(4px) scale(0.95) scaleX(1.06);
  box-shadow:
    0 2px 0 #1a7a43,
    0 4px 10px rgba(0,0,0,0.2),
    inset 0 2px 8px rgba(0,0,0,0.2);
  filter: saturate(1.4) brightness(0.95);
}
.btn-clay-blob {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  animation: btn-clay-bloom 0.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-clay-bloom {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-clay-blob { animation: none; display: none; }
}

document.querySelectorAll('.btn-clay').forEach(function (btn) {
  btn.addEventListener('click', function (e) {
    var r = btn.getBoundingClientRect();
    var size = Math.max(r.width, r.height);
    var blob = document.createElement('div');
    blob.className = 'btn-clay-blob';
    blob.style.width = size + 'px';
    blob.style.height = size + 'px';
    blob.style.left = (e.clientX - r.left - size / 2) + 'px';
    blob.style.top = (e.clientY - r.top - size / 2) + 'px';
    btn.appendChild(blob);
    blob.addEventListener('animationend', function () { this.remove(); });
  });
});