Follow Button

<button class="nuda-follow__btn" type="button">
  <span class="nuda-follow__plus" aria-hidden="true">+</span>
  <span>Follow</span>
</button>

<!-- Active state -->
<button class="nuda-follow__btn nuda-follow__btn--active" type="button">
  <span class="nuda-follow__check" aria-hidden="true"><!-- check SVG --></span>
  <span>Following</span>
</button>

/* Follow Button
   Pill button that toggles between Follow and Following states.
   Toggle the .nuda-follow__btn--active class to switch. */

.nuda-follow__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e4ff54;
  background: #e4ff54;
  color: #09090b;
  transition:
    transform 0.2s,
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.nuda-follow__btn:hover { transform: translateY(-1px); }

.nuda-follow__btn--active {
  background: transparent;
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.18);
}

.nuda-follow__btn--active:hover {
  border-color: #ff5e7a;
  color: #ff5e7a;
}

.nuda-follow__plus {
  font-size: 1rem;
  line-height: 0;
  transition: transform 0.25s;
}

.nuda-follow__btn:hover .nuda-follow__plus { transform: rotate(90deg); }

.nuda-follow__check {
  display: inline-flex;
  animation: nuda-follow-pop 0.4s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}

@keyframes nuda-follow-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-follow__btn:hover { transform: none; }
  .nuda-follow__plus,
  .nuda-follow__check { animation: none; transition: none; }
}

// Toggle Follow / Following state on click
document.querySelectorAll('.nuda-follow__btn').forEach((btn) => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('nuda-follow__btn--active');
    const label = btn.querySelector('span:last-child');
    if (label) {
      label.textContent = btn.classList.contains('nuda-follow__btn--active')
        ? 'Following'
        : 'Follow';
    }
  });
});