Send Button

<button class="nuda-send-btn" aria-label="Send">
  <svg class="nuda-send-btn__plane" viewBox="0 0 24 24" fill="currentColor">
    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
  </svg>
  <svg class="nuda-send-btn__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
</button>

/* Send Button
   Paper plane flies away on click, checkmark appears.
   Customize: --send-bg, --send-success */

.nuda-send-btn {
  --send-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --send-success: linear-gradient(135deg, #22c55e, #16a34a);
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--send-bg);
  cursor: pointer;
  color: #fff;
  overflow: hidden;
}

.nuda-send-btn svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform, opacity;
}

.nuda-send-btn__plane {
  transform: translateX(-1px);
}

.nuda-send-btn__check {
  opacity: 0;
  transform: scale(0.3);
}

.nuda-send-btn--sent .nuda-send-btn__plane {
  opacity: 0;
  transform: translate(30px, -30px) scale(0.3);
}

.nuda-send-btn--sent .nuda-send-btn__check {
  opacity: 1;
  transform: scale(1);
}

.nuda-send-btn--sent {
  background: var(--send-success);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-send-btn svg { transition: none; }
}

/* Send Button — vanilla JS
   Paper plane flies away, checkmark appears. */

(function () {
  document.querySelectorAll(".nuda-send-btn").forEach(function (btn) {
    btn.addEventListener("click", function () {
      btn.classList.add("nuda-send-btn--sent");
      setTimeout(function () {
        btn.classList.remove("nuda-send-btn--sent");
      }, 1200);
    });
  });
})();