Animated CTA Button with Expanding Dot Effect

<button class="group flex gap-3 overflow-hidden transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] hover:translate-y-[-1px] active:scale-[0.98] active:shadow-none bg-white rounded-full pt-5 pr-10 pb-5 pl-10 relative shadow-[0_8px_30px_rgb(0,0,0,0.04)] items-center justify-center" data-element-locator="html &gt; body:nth-of-type(1) &gt; button:nth-of-type(1)">
        
        <!-- Expanding Dot / Background -->
        <div class="relative z-0 h-3 w-3 rounded-full bg-black transition-all duration-500 ease-[cubic-bezier(0.86,0,0.07,1)] group-hover:scale-[80] group-hover:bg-[#1A5CFF]"></div>
        
        <!-- Text -->
        <span class="relative z-10 text-lg font-semibold tracking-normal text-black uppercase transition-colors duration-300 group-hover:text-white">
            See all projects
        </span>

        <!-- Arrow Icon -->
        <div class="relative z-10 flex w-0 translate-x-4 items-center justify-center overflow-hidden opacity-0 transition-all duration-300 ease-[cubic-bezier(0.86,0,0.07,1)] group-hover:w-6 group-hover:translate-x-0 group-hover:opacity-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="width: 28px; height: 28px; color: rgb(255, 255, 255)" class="lucide lucide-arrow-right text-white stroke-[1.5] w-[28px] h-[28px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="round-arrow-right-line-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><g fill="none" stroke="#ffffff" stroke-width="1.5" class=""><circle cx="12" cy="12" r="10" opacity=".5" class=""></circle><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h8m0 0l-3-3m3 3l-3 3" class=""></path></g></svg>
        </div>

    </button>