Glassmorphic Gradient Sign-Up Button

<button class="group relative inline-flex cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:scale-[1.1] hover:text-white text-xs font-semibold text-white/70 tracking-tight rounded-full pt-[8px] pr-[16px] pb-[8px] pl-[16px] items-center justify-center" style="box-shadow:inset 0 0 0 1px rgba(99,102,241,0.3);background:linear-gradient(135deg,rgba(99,102,241,0.6) 0%,rgba(79,70,229,0.4) 50%,rgba(99,102,241,0.2) 100%);backdrop-filter:blur(12px);border:0.5px solid rgba(99,102,241,0.2);">
  <span class="relative z-10 text-sm font-normal rounded-full">Sign Up</span>

  <!-- replaces the old ::before underline -->
  <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 opacity-20 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 text-xs rounded-full" style="background:linear-gradient(90deg,rgba(99,102,241,0) 0%,rgba(99,102,241,1) 50%,rgba(99,102,241,0) 100%);"></span>
</button>