Gradient CTA Button with Expanding Arrow Icon

<a href="#" class="group inline-flex items-center gap-2 ring-1 ring-white/10 transition relative overflow-hidden text-sm font-medium text-white rounded-2xl" style="background: linear-gradient(135deg, #374151 0%, #6b7280 100%); box-shadow: inset 0 0 1.6em -0.6em #4b5563; height:2.8em; padding:0.35em 3.3em 0.35em 1.2em; letter-spacing:0.05em;">
  Get Started Now
  <span class="absolute right-[0.3em] flex items-center justify-center h-[2.2em] w-[2.2em] rounded-[0.7em] bg-white transition-all duration-300 group-hover:w-[calc(100%-0.6em)] active:scale-95" style="box-shadow:0.1em 0.1em 0.6em 0.2em #4b5563;">
    <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 w-[1.1em] h-[1.1em] text-[#4b5563] transition-transform duration-300 group-hover:translate-x-[0.1em]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
  </span>
</a>