Submit-to-Success Morph

<form class="nuda-fs2-submit-morph">
  <button type="submit" class="nuda-fs2-submit-morph__btn">
    <span class="nuda-fs2-submit-morph__label">Create account</span>
    <svg class="nuda-fs2-submit-morph__check" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="3" stroke-linecap="round"
         stroke-linejoin="round" aria-hidden="true">
      <path d="M5 12 L10 17 L20 7" />
    </svg>
    <span class="nuda-fs2-submit-morph__sr" role="status" aria-live="polite"></span>
  </button>
</form>
<!-- JS: on submit, prevent default, then once your request resolves add
     .is-success to morph the pill into a round checkmark and announce it. -->

/* Submit-to-Success Morph — pill button collapses into a check on success. */
(function () {
  var form = document.querySelector('.nuda-fs2-submit-morph');
  if (!form) return;
  var btn = form.querySelector('.nuda-fs2-submit-morph__btn');
  var sr = form.querySelector('.nuda-fs2-submit-morph__sr');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    if (btn.classList.contains('is-success')) return;

    // Simulate an async request — replace with your real submit/fetch.
    setTimeout(function () {
      btn.classList.add('is-success');
      sr.textContent = 'Account created.';
    }, 900);
  });
})();

.nuda-fs2-submit-morph {
  display: inline-flex;
}

.nuda-fs2-submit-morph__btn {
  position: relative;
  min-width: 160px;
  height: 46px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e4ff54;
  color: #09090b;
  border: none;
  border-radius: 23px;
  font: 700 13px ui-sans-serif,system-ui,sans-serif;
  cursor: pointer;
  overflow: hidden;
  transition: min-width .4s cubic-bezier(.65,0,.35,1),border-radius .4s,background .25s;
}

.nuda-fs2-submit-morph__btn:focus-visible {
  outline: 2px solid #fafafa;
  outline-offset: 3px;
}

.nuda-fs2-submit-morph__label {
  transition: opacity .2s,transform .3s;
}

.nuda-fs2-submit-morph__check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%,-50%) scale(0) rotate(-45deg);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;
}

.nuda-fs2-submit-morph__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nuda-fs2-submit-morph__btn.is-success {
  min-width: 46px;
  padding: 0;
  border-radius: 50%;
}

.nuda-fs2-submit-morph__btn.is-success .nuda-fs2-submit-morph__label {
  opacity: 0;
  transform: scale(.7);
}

.nuda-fs2-submit-morph__btn.is-success .nuda-fs2-submit-morph__check {
  transform: translate(-50%,-50%) scale(1) rotate(0deg);
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-fs2-submit-morph__btn,.nuda-fs2-submit-morph__label,.nuda-fs2-submit-morph__check {
    transition: opacity .12s linear !important;
  }
}