Animated Gradient CTA Button with Arrow Icon

<div class="relative inline-block group text-sm rounded-full">
  <button class="group relative inline-flex min-w-[120px] 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-slate-900 hover:from-emerald-300 hover:to-teal-300 text-xs font-semibold text-slate-900 tracking-tight bg-gradient-to-r from-emerald-400 to-teal-400 ring-white/20 ring-1 rounded-full pt-[10px] pr-[17px] pb-[10px] pl-[17px] shadow-lg items-center justify-center" style="">
  <span class="relative z-10 text-sm font-normal rounded-full">Open an account</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right ml-2 w-[24px] h-[16px]" data-icon-replaced="true" style="width: 24px; height: 16px; color: rgb(15, 23, 42);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>

  <!-- 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 rounded-full text-xs" style="background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);"></span>
</button>
  <span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-full text-sm" style="background: radial-gradient(60% 100% at 50% 50%, rgba(110,231,183,.55), rgba(94,234,212,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
</div>