Split-reveal button

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/buttons/btn-split-reveal.html
  Desc   : Label splits into two clipped halves revealing a second label
  ============================================================
-->
<button class="sg-btn-split-reveal" type="button" style="--sg-color:#7F77DD; --sg-size:16px; --sg-duration:0.4s;">
  <span class="sg-btn-split-reveal-base" aria-hidden="true">Hover me</span>
  <span class="sg-btn-split-reveal-half sg-btn-split-reveal-top" aria-hidden="true">Hover me</span>
  <span class="sg-btn-split-reveal-half sg-btn-split-reveal-bot" aria-hidden="true">Hover me</span>
  <span class="sg-btn-split-reveal-alt">Let's go →</span>
</button>
<style>
  .sg-btn-split-reveal {
    position: relative;
    appearance: none;
    font: inherit;
    font-size: var(--sg-size);
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 1.5px solid rgba(128, 128, 128, 0.45);
    border-radius: 10px;
    padding: 0.8em 1.9em;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--sg-duration) ease;
  }
  .sg-btn-split-reveal-base {
    visibility: hidden;
  }
  .sg-btn-split-reveal-half {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transition: transform var(--sg-duration) cubic-bezier(0.5, 0, 0.2, 1);
  }
  .sg-btn-split-reveal-top { clip-path: inset(0 0 50% 0); }
  .sg-btn-split-reveal-bot { clip-path: inset(50% 0 0 0); }
  .sg-btn-split-reveal-alt {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--sg-color);
    transform: scale(0.6);
    opacity: 0;
    transition: transform var(--sg-duration) cubic-bezier(0.3, 1.5, 0.5, 1), opacity var(--sg-duration) ease;
  }
  .sg-btn-split-reveal:hover,
  .sg-btn-split-reveal:focus-visible {
    border-color: var(--sg-color);
  }
  .sg-btn-split-reveal:hover .sg-btn-split-reveal-top,
  .sg-btn-split-reveal:focus-visible .sg-btn-split-reveal-top {
    transform: translateY(-115%);
  }
  .sg-btn-split-reveal:hover .sg-btn-split-reveal-bot,
  .sg-btn-split-reveal:focus-visible .sg-btn-split-reveal-bot {
    transform: translateY(115%);
  }
  .sg-btn-split-reveal:hover .sg-btn-split-reveal-alt,
  .sg-btn-split-reveal:focus-visible .sg-btn-split-reveal-alt {
    transform: scale(1);
    opacity: 1;
  }
</style>