Goo blob button

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/buttons/btn-goo-blob.html
  Desc   : Gooey blob splash bursting from behind the button on hover
  ============================================================
-->
<button class="sg-btn-goo-blob" type="button" style="--sg-color:#7F77DD; --sg-size:160px; --sg-duration:0.5s;">
  <svg viewBox="0 0 160 80" aria-hidden="true" focusable="false">
    <defs>
      <filter id="sg-btn-goo-blob-goo" x="-30%" y="-60%" width="160%" height="220%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="sg-btn-goo-blob-blur" />
        <feColorMatrix in="sg-btn-goo-blob-blur" mode="matrix"
          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" />
      </filter>
    </defs>
    <g class="sg-btn-goo-blob-goop">
      <rect x="20" y="24" width="120" height="32" rx="16" />
      <circle class="sg-btn-goo-blob-b1" cx="80" cy="40" r="9" />
      <circle class="sg-btn-goo-blob-b2" cx="80" cy="40" r="7" />
      <circle class="sg-btn-goo-blob-b3" cx="80" cy="40" r="8" />
      <circle class="sg-btn-goo-blob-b4" cx="80" cy="40" r="6" />
    </g>
  </svg>
  <span class="sg-btn-goo-blob-label">Hover the goo</span>
</button>
<style>
  .sg-btn-goo-blob {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: var(--sg-size);
    aspect-ratio: 2 / 1;
    cursor: pointer;
    font: inherit;
  }
  .sg-btn-goo-blob svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .sg-btn-goo-blob-goop {
    fill: var(--sg-color);
    filter: url(#sg-btn-goo-blob-goo);
  }
  .sg-btn-goo-blob circle {
    transition: transform var(--sg-duration) cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  .sg-btn-goo-blob-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 600;
    font-size: calc(var(--sg-size) / 11);
    pointer-events: none;
  }
  .sg-btn-goo-blob:hover .sg-btn-goo-blob-b1,
  .sg-btn-goo-blob:focus-visible .sg-btn-goo-blob-b1 { transform: translate(-62px, -18px); }
  .sg-btn-goo-blob:hover .sg-btn-goo-blob-b2,
  .sg-btn-goo-blob:focus-visible .sg-btn-goo-blob-b2 { transform: translate(58px, -22px); }
  .sg-btn-goo-blob:hover .sg-btn-goo-blob-b3,
  .sg-btn-goo-blob:focus-visible .sg-btn-goo-blob-b3 { transform: translate(-48px, 20px); }
  .sg-btn-goo-blob:hover .sg-btn-goo-blob-b4,
  .sg-btn-goo-blob:focus-visible .sg-btn-goo-blob-b4 { transform: translate(52px, 24px); }
</style>