Icon Slide

<button class="nuda-btn-icon-slide">
  <span class="nuda-btn-icon-slide__label">Continue</span>
  <span class="nuda-btn-icon-slide__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h14"/><path d="M13 6l6 6-6 6"/>
    </svg>
  </span>
</button>

/* Icon Slide — label nudges left and an arrow slides in on hover. */
.nuda-btn-icon-slide {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  background: #e4ff54;
  color: #09090b;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
}

.nuda-btn-icon-slide__label {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.nuda-btn-icon-slide__icon {
  position: absolute;
  right: 14px;
  display: inline-flex;
  opacity: 0;
  transform: translateX(-10px);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
}

.nuda-btn-icon-slide__icon svg { width: 16px; height: 16px; }

.nuda-btn-icon-slide:hover .nuda-btn-icon-slide__label { transform: translateX(-10px); }
.nuda-btn-icon-slide:hover .nuda-btn-icon-slide__icon { opacity: 1; transform: translateX(0); }

.nuda-btn-icon-slide:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-btn-icon-slide__label,
  .nuda-btn-icon-slide__icon { transition: none; }
  .nuda-btn-icon-slide__icon { opacity: 1; transform: none; }
}