Shine Sweep

<!-- Shine Sweep — light sweep across button on hover -->
<button class="nuda-shine-sweep">
  <span class="nuda-shine-sweep__label">Shine Sweep</span>
</button>

/* ── Shine Sweep ─────────────────────────────────────────────
   Customize:
     --nuda-ss-bg      : button background color
     --nuda-ss-clr     : text color
     --nuda-ss-radius  : border radius
     --nuda-ss-speed   : sweep duration
   ──────────────────────────────────────────────────────────── */
.nuda-shine-sweep {
  --nuda-ss-bg: #6366f1;
  --nuda-ss-clr: #fff;
  --nuda-ss-radius: 8px;
  --nuda-ss-speed: 0.6s;

  position: relative;
  overflow: hidden;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-ss-clr);
  background: var(--nuda-ss-bg);
  border: none;
  border-radius: var(--nuda-ss-radius);
  cursor: pointer;
}

.nuda-shine-sweep__label {
  position: relative;
  z-index: 1;
}

/* Shine pseudo-element */
.nuda-shine-sweep::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transition: none;
  transform: translateX(0);
}

.nuda-shine-sweep:hover::after {
  animation: nuda-shine-sweep-anim var(--nuda-ss-speed) ease-in-out;
}

@keyframes nuda-shine-sweep-anim {
  to { transform: translateX(400%); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-shine-sweep::after {
    animation: none !important;
  }
}