Sliding Window Pill

<nav aria-label="Pagination" class="nuda-pg2-pill">
  <div class="nuda-pg2-pill__track">
    <span class="nuda-pg2-pill__glow" aria-hidden="true"></span>
    <button class="nuda-pg2-pill__page nuda-pg2-pill__page--on" aria-current="page">1</button>
    <button class="nuda-pg2-pill__page">2</button>
    <button class="nuda-pg2-pill__page">3</button>
    <button class="nuda-pg2-pill__page">4</button>
    <button class="nuda-pg2-pill__page">5</button>
  </div>
</nav>

.nuda-pg2-pill {
  width: 250px;
}

.nuda-pg2-pill__track {
  position: relative;
  display: flex;
  gap: 4px;
}

.nuda-pg2-pill__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e4ff54;
  animation: _nuda-pg2pilltravel 3.6s ease-in-out infinite;
  z-index: 0;
}

.nuda-pg2-pill__page {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #999;
  font-size: .8rem;
  cursor: pointer;
  border-radius: 10px;
  transition: color .15s;
}

.nuda-pg2-pill__page:hover {
  color: #fafafa;
}

.nuda-pg2-pill__page--on {
  color: #0a0a0a;
  font-weight: 700;
}

.nuda-pg2-pill__page:focus-visible {
  outline: 2px solid #fafafa;
  outline-offset: 2px;
}

@keyframes _nuda-pg2pilltravel {
  0%,20% {
    transform: translateX(0);
  }
  40%,60% {
    transform: translateX(48px);
  }
  80%,100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pg2-pill__glow {
    animation: none !important;
    transform: translateX(0);
  }
}