Liquid swipe button

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/buttons/btn-liquid-swipe.html
  Desc   : Wavy liquid front sweeping across the button on hover
  ============================================================
-->
<button class="sg-btn-liquid-swipe" type="button" style="--sg-color:#4B9FE8; --sg-size:16px; --sg-duration:0.7s;">
  <svg viewBox="0 0 140 44" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <defs>
      <clipPath id="sg-btn-liquid-swipe-pill">
        <rect x="0" y="0" width="140" height="44" rx="22" />
      </clipPath>
    </defs>
    <rect class="sg-btn-liquid-swipe-rim" x="1" y="1" width="138" height="42" rx="21" />
    <g clip-path="url(#sg-btn-liquid-swipe-pill)">
      <g class="sg-btn-liquid-swipe-bob">
        <path class="sg-btn-liquid-swipe-wave"
          d="M-6 -8 H132 C 140 0, 128 8, 136 16 C 144 24, 128 32, 136 40 C 140 46, 134 50, 132 52 H-6 Z" />
      </g>
    </g>
  </svg>
  <span class="sg-btn-liquid-swipe-label">Dive in</span>
</button>
<style>
  .sg-btn-liquid-swipe {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--sg-size);
    font-weight: 600;
    color: inherit;
    padding: 0.8em 2em;
    cursor: pointer;
  }
  .sg-btn-liquid-swipe svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .sg-btn-liquid-swipe-rim {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }
  .sg-btn-liquid-swipe-wave {
    fill: var(--sg-color);
    /* viewBox units — percentage translate is unreliable on SVG children */
    transform: translateX(-152px);
    transition: transform var(--sg-duration) cubic-bezier(0.5, 0.1, 0.3, 1);
  }
  .sg-btn-liquid-swipe-bob {
    animation: sg-btn-liquid-swipe-bob 1.6s ease-in-out infinite;
  }
  .sg-btn-liquid-swipe-label {
    position: relative;
    transition: color calc(var(--sg-duration) * 0.7) ease;
  }
  .sg-btn-liquid-swipe:hover .sg-btn-liquid-swipe-wave,
  .sg-btn-liquid-swipe:focus-visible .sg-btn-liquid-swipe-wave {
    transform: translateX(0);
  }
  .sg-btn-liquid-swipe:hover .sg-btn-liquid-swipe-label,
  .sg-btn-liquid-swipe:focus-visible .sg-btn-liquid-swipe-label {
    color: #ffffff;
  }
  @keyframes sg-btn-liquid-swipe-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
</style>