Magnetic fill button

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/buttons/btn-magnetic-fill.html
  Desc   : Radial fill expanding from the cursor's entry side — zero JS
  ============================================================
-->
<button class="sg-btn-magnetic-fill" type="button" style="--sg-color:#7F77DD; --sg-size:16px; --sg-duration:0.45s;">
  <span class="sg-btn-magnetic-fill-zone sg-btn-magnetic-fill-zone-l" aria-hidden="true"></span>
  <span class="sg-btn-magnetic-fill-zone sg-btn-magnetic-fill-zone-c" aria-hidden="true"></span>
  <span class="sg-btn-magnetic-fill-zone sg-btn-magnetic-fill-zone-r" aria-hidden="true"></span>
  <span class="sg-btn-magnetic-fill-ink" aria-hidden="true"></span>
  <span class="sg-btn-magnetic-fill-label">Magnetic fill</span>
</button>
<style>
  .sg-btn-magnetic-fill {
    position: relative;
    appearance: none;
    font: inherit;
    font-size: var(--sg-size);
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 1.5px solid var(--sg-color);
    border-radius: 999px;
    padding: 0.75em 1.8em;
    cursor: pointer;
    overflow: hidden;
  }
  .sg-btn-magnetic-fill-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34%;
    z-index: 3;
  }
  .sg-btn-magnetic-fill-zone-l { left: 0; }
  .sg-btn-magnetic-fill-zone-c { left: 33%; }
  .sg-btn-magnetic-fill-zone-r { right: 0; }
  .sg-btn-magnetic-fill-ink {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--sg-color);
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--sg-duration) ease-out;
    z-index: 1;
  }
  .sg-btn-magnetic-fill-zone-l:hover ~ .sg-btn-magnetic-fill-ink { left: 12%; }
  .sg-btn-magnetic-fill-zone-r:hover ~ .sg-btn-magnetic-fill-ink { left: 88%; }
  .sg-btn-magnetic-fill:hover .sg-btn-magnetic-fill-ink,
  .sg-btn-magnetic-fill:focus-visible .sg-btn-magnetic-fill-ink {
    transform: translate(-50%, -50%) scale(10);
  }
  .sg-btn-magnetic-fill-label {
    position: relative;
    z-index: 2;
    transition: color var(--sg-duration) ease;
  }
  .sg-btn-magnetic-fill:hover .sg-btn-magnetic-fill-label,
  .sg-btn-magnetic-fill:focus-visible .sg-btn-magnetic-fill-label {
    color: #ffffff;
  }
</style>