Gradient Call-to-Action Button with Arrow Icon

<a href="#" class="inline-flex items-center gap-3 transition text-white" style="border-radius: 0.25rem; text-transform: uppercase; font-style: normal; font-weight: 400; padding: 12px 30px; color: rgb(255, 255, 255); clip-path: polygon(0px 0px, 0px 0px, 100% 0px, 100% 0px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0px 100%); height: 48px; font-size: 0.7rem; line-height: 14px; letter-spacing: 1.2px; transition: 0.3s ease-in; background-image: linear-gradient(90deg, rgb(28, 28, 28), rgb(98, 32, 251)); border: 0px solid; overflow: hidden;" onmouseover="this.style.paddingRight='35px'; this.style.paddingLeft='35px'; this.style.transition='all .3s ease-in';" onmouseout="this.style.paddingRight='30px'; this.style.paddingLeft='30px';">
  View All Reviews
  <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-900 text-white">
    <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 h-3.5 w-3.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
  </span>
</a>