Liquid Button

<!-- Liquid Button — gooey blobs merge/split on hover via SVG filter -->
<!-- Define the goo filter once per page (it is referenced by id). -->
<svg width="0" height="0" aria-hidden="true">
  <defs>
    <filter id="nuda-morph-goo-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
      <feColorMatrix in="blur" mode="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

<button type="button" class="nuda-morph-liquid">
  <span class="nuda-morph-liquid__goo" aria-hidden="true">
    <i></i><i></i><i></i>
  </span>
  <span class="nuda-morph-liquid__label">Hover me</span>
</button>

/* Liquid Button
   Three blurred circles fused by an SVG goo filter; on hover the
   outer two slide out, giving a liquid split/merge effect.
   Customize: --morph-liquid-color, --morph-liquid-ink */

.nuda-morph-liquid {
  --morph-liquid-color: #e4ff54;
  --morph-liquid-ink: #09090b;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.nuda-morph-liquid__goo {
  position: absolute;
  inset: 0;
  filter: url(#nuda-morph-goo-filter);
  z-index: 0;
}

.nuda-morph-liquid__goo i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: var(--morph-liquid-color);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1.2);
  will-change: transform;
}

.nuda-morph-liquid:hover .nuda-morph-liquid__goo i:nth-child(1),
.nuda-morph-liquid:focus-visible .nuda-morph-liquid__goo i:nth-child(1) {
  transform: translate(-150%, -50%) scale(0.7);
}

.nuda-morph-liquid:hover .nuda-morph-liquid__goo i:nth-child(3),
.nuda-morph-liquid:focus-visible .nuda-morph-liquid__goo i:nth-child(3) {
  transform: translate(50%, -50%) scale(0.7);
}

.nuda-morph-liquid__label {
  position: relative;
  z-index: 1;
  display: block;
  padding: 12px 28px;
  color: var(--morph-liquid-ink);
  font-weight: 700;
  font-size: 0.9rem;
}

.nuda-morph-liquid:focus-visible {
  outline: 2px solid var(--morph-liquid-color);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-morph-liquid__goo i {
    transition: none;
  }
}