Fill Slide

<!-- Fill Slide — background fills from left to right on hover -->
<button class="nuda-fill-slide">
  <span class="nuda-fill-slide__label">Fill Slide</span>
</button>

/* ── Fill Slide ──────────────────────────────────────────────
   Customize:
     --nuda-fs-bg         : fill color
     --nuda-fs-clr        : default text color
     --nuda-fs-clr-hover  : text color when filled
     --nuda-fs-border     : border color
     --nuda-fs-speed      : fill transition speed
   ──────────────────────────────────────────────────────────── */
.nuda-fill-slide {
  --nuda-fs-bg: #6366f1;
  --nuda-fs-clr: #6366f1;
  --nuda-fs-clr-hover: #fff;
  --nuda-fs-border: #6366f1;
  --nuda-fs-speed: 0.4s;

  position: relative;
  overflow: hidden;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-fs-clr);
  background: transparent;
  border: 2px solid var(--nuda-fs-border);
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--nuda-fs-speed) ease;
}

.nuda-fill-slide__label {
  position: relative;
  z-index: 1;
}

.nuda-fill-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--nuda-fs-bg);
  transform: translateX(-101%);
  transition: transform var(--nuda-fs-speed) ease;
}

.nuda-fill-slide:hover {
  color: var(--nuda-fs-clr-hover);
}
.nuda-fill-slide:hover::before {
  transform: translateX(0);
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-fill-slide::before {
    transition: none;
  }
  .nuda-fill-slide:hover::before {
    transform: translateX(0);
  }
}