Keyboard Hint Pager

<nav aria-label="Pagination" class="nuda-pg2-kbd">
  <button class="nuda-pg2-kbd__btn" aria-label="Previous page">
    <kbd class="nuda-pg2-kbd__key" aria-hidden="true">←</kbd>
  </button>
  <span class="nuda-pg2-kbd__label">4 / 12</span>
  <button class="nuda-pg2-kbd__btn" aria-label="Next page">
    <kbd class="nuda-pg2-kbd__key nuda-pg2-kbd__key--hint" aria-hidden="true">→</kbd>
  </button>
</nav>

.nuda-pg2-kbd {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
}

.nuda-pg2-kbd__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: #161616;
  cursor: pointer;
  transition: border-color .15s;
}

.nuda-pg2-kbd__btn:hover {
  border-color: rgba(228,255,84,.4);
}

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

.nuda-pg2-kbd__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .3rem;
  border-radius: 5px;
  background: #262626;
  border: 1px solid rgba(255,255,255,.15);
  color: #cfcfcf;
  font-size: .7rem;
  font-family: inherit;
}

.nuda-pg2-kbd__key--hint {
  background: #e4ff54;
  border-color: #e4ff54;
  color: #0a0a0a;
  animation: _nuda-pg2kbdpulse 1.8s ease-in-out infinite;
}

.nuda-pg2-kbd__label {
  font-size: .78rem;
  color: #999;
  font-variant-numeric: tabular-nums;
}

@keyframes _nuda-pg2kbdpulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(228,255,84,.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(228,255,84,0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pg2-kbd__key--hint {
    animation: none !important;
  }
}