Animated Pill Button with Hover Letter Reveal

<style>
.btn-53,
.btn-53 *,
.btn-53 :after,
.btn-53 :before,
.btn-53:after,
.btn-53:before {
  border: 0 solid;
  box-sizing: border-box;
}

/* base reset */
.btn-53 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-image: none;
  cursor: pointer;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}

.btn-53:disabled {
  cursor: default;
}

.btn-53 svg {
  display: block;
  vertical-align: middle;
}

.btn-53 [hidden] {
  display: none;
}

/* pill button look */
.btn-53 {
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.1rem 3rem;
  position: relative;
  text-transform: uppercase;
  background-color: #ffffff; /* background under the sliding layer */
  color: #000;
}

/* top layer text */
.btn-53 .original {
  background: #ffffff;
  color: #000000;
  display: grid;
  inset: 0;
  place-content: center;
  position: absolute;
  transition: transform 0.25s cubic-bezier(0.87, 0, 0.13, 1);
}

/* slide the original label down on hover */
.btn-53:hover .original {
  transform: translateY(100%);
}

/* letters underneath */
.btn-53 .letters {
  display: inline-flex;
  gap: 0.05em;
}

.btn-53 span {
  opacity: 0;
  transform: translateY(-15px);
  transition:
    transform 0.25s cubic-bezier(0.87, 0, 0.13, 1),
    opacity 0.25s;
  color: #000;
}

/* alternate direction for every second letter */
.btn-53 span:nth-child(2n) {
  transform: translateY(15px);
}

/* reveal letters on hover */
.btn-53:hover span {
  opacity: 1;
  transform: translateY(0);
}

/* staggered delays for each letter of "START FREE" */
.btn-53:hover span:nth-child(2) { transition-delay: 0.05s; }
.btn-53:hover span:nth-child(3) { transition-delay: 0.10s; }
.btn-53:hover span:nth-child(4) { transition-delay: 0.15s; }
.btn-53:hover span:nth-child(5) { transition-delay: 0.20s; }
.btn-53:hover span:nth-child(6) { transition-delay: 0.25s; }
.btn-53:hover span:nth-child(7) { transition-delay: 0.30s; }
.btn-53:hover span:nth-child(8) { transition-delay: 0.35s; }
.btn-53:hover span:nth-child(9) { transition-delay: 0.40s; }
</style>

<button class="btn-53">
    <div class="original">Start Free</div>

    <div class="letters">
      <span class="">S</span>
      <span class="">T</span>
      <span class="">A</span>
      <span class="">R</span>
      <span class="">T</span>
      <span class="">F</span>
      <span class="">R</span>
      <span class="">E</span>
      <span class="">E</span>
    </div>
  </button>