Underline Slide

<!-- Underline Slide — text underline slides in on hover -->
<button class="nuda-underline-slide">Underline Slide</button>

/* ── Underline Slide ─────────────────────────────────────────
   Customize:
     --nuda-us-clr     : text & underline color
     --nuda-us-weight  : underline thickness
     --nuda-us-speed   : slide-in speed
     --nuda-us-gap     : distance below text
   ──────────────────────────────────────────────────────────── */
.nuda-underline-slide {
  --nuda-us-clr: #6366f1;
  --nuda-us-weight: 2px;
  --nuda-us-speed: 0.3s;
  --nuda-us-gap: 2px;

  position: relative;
  display: inline-block;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-us-clr);
  background: transparent;
  border: none;
  cursor: pointer;
}

.nuda-underline-slide::after {
  content: "";
  position: absolute;
  bottom: calc(6px + var(--nuda-us-gap));
  left: 32px;
  right: 32px;
  height: var(--nuda-us-weight);
  background: var(--nuda-us-clr);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nuda-us-speed) ease;
}

.nuda-underline-slide:hover::after {
  transform: scaleX(1);
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-underline-slide::after {
    transition: none;
  }
}