Liquid Button — Free HTML CSS JS Gooey Hover Snippet

<div class="lq-stage">
  <svg width="0" height="0" class="lq-defs"><filter id="lqGoo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo"/><feBlend in="SourceGraphic" in2="goo"/></filter></svg>

  <button type="button" class="lq-btn" id="lqBtn">
    <span class="lq-blobs" id="lqBlobs"></span>
    <span class="lq-label">Subscribe</span>
  </button>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a14;display:flex;justify-content:center;align-items:center;min-height:100vh}

.lq-stage{padding:40px}
.lq-btn{position:relative;border:none;background:none;padding:16px 36px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:16px;font-weight:800;color:#fff;isolation:isolate}
.lq-label{position:relative;z-index:2;pointer-events:none}

.lq-blobs{position:absolute;inset:0;z-index:1;border-radius:inherit;filter:url(#lqGoo);overflow:visible}
.lq-blobs::before{content:'';position:absolute;inset:0;border-radius:inherit;background:#6366f1}
.lq-blob{position:absolute;top:50%;width:34px;height:34px;border-radius:50%;background:#6366f1;transform:translate(-50%,-50%) scale(0)}

var btn = document.getElementById('lqBtn');
var host = document.getElementById('lqBlobs');

// On hover, fire a series of gooey blobs that rise from the bottom edge. The SVG
// goo filter merges any overlapping circles into one organic liquid mass.
var timers = [];
function fluidIn() {
  clear();
  var r = btn.getBoundingClientRect();
  var n = 9;
  for (var i = 0; i < n; i++) {
    (function (i) {
      timers.push(setTimeout(function () {
        var b = document.createElement('span');
        b.className = 'lq-blob';
        var x = (i + 0.5) / n * 100;
        b.style.left = x + '%';
        host.appendChild(b);
        b.animate(
          [{ transform: 'translate(-50%,40px) scale(0)' },
           { transform: 'translate(-50%,-50%) scale(1.5)', offset: .6 },
           { transform: 'translate(-50%,-50%) scale(1.5)' }],
          { duration: 600, easing: 'cubic-bezier(.34,1.4,.5,1)', fill: 'forwards' }
        );
      }, i * 35));
    })(i);
  }
}
function fluidOut() {
  clear();
  Array.prototype.slice.call(host.querySelectorAll('.lq-blob')).forEach(function (b, i) {
    setTimeout(function () {
      b.animate([{ transform: getComputedStyle(b).transform },
                 { transform: 'translate(-50%,40px) scale(0)' }],
        { duration: 400, easing: 'ease-in', fill: 'forwards' }).onfinish = function () { b.remove(); };
    }, i * 25);
  });
}
function clear() { timers.forEach(clearTimeout); timers = []; }

btn.addEventListener('pointerenter', fluidIn);
btn.addEventListener('pointerleave', fluidOut);
btn.addEventListener('click', function () {
  var l = btn.querySelector('.lq-label');
  l.textContent = 'Subscribed ✓';
  setTimeout(function () { l.textContent = 'Subscribe'; }, 1400);
});