Shiny Call-to-Action Button with Hover Effect

<a href="#"
  class="group inline-flex items-center justify-center gap-3 md:text-sm uppercase transition-all duration-500 overflow-hidden ring-offset-2 ring-offset-[#040812] hover:shadow-[0_0_50px_rgba(148,163,184,0.3)] hover:-translate-y-1 text-xs font-normal text-slate-900 tracking-[0.15em] ring-slate-400/30 ring-1 rounded-sm pt-4 pr-10 pb-4 pl-10 relative shadow-[0_0_30px_rgba(148,163,184,0.15)]"
  style="animation: shine 4s linear infinite"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(2) &gt; a:nth-of-type(1)">
  <div
    class="group-hover:translate-y-0 transition-transform duration-500 ease-out bg-white/20 absolute top-0 right-0 bottom-0 left-0 translate-y-full"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(2) &gt; a:nth-of-type(1) &gt; div:nth-of-type(1)">
  </div>
  <span class="relative z-10 flex items-center gap-3 font-sans">
                        Jetzt Erstgespräch buchen
                        <iconify-icon icon="solar:arrow-right-linear" class="text-lg relative group-hover:translate-x-1 transition-transform"></iconify-icon>
                    </span>
</a>