Animated Hover Ripple CTA Button

<a href="#"
  class="inline-flex items-center justify-center gap-3 hover:text-white transition-colors relative overflow-hidden group z-10 duration-1000 text-xl text-white bg-emerald-500 w-60 h-12 rounded-2xl shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
  <span class="absolute group-hover:scale-100 -z-20 left-22 -top-24 group-hover:duration-500 duration-700 origin-center transform transition-all bg-emerald-600 w-60 h-60 rounded-full scale-0"></span>
  <span class="absolute left-18 -top-24 group-hover:scale-100 -z-10 group-hover:duration-700 duration-500 origin-center transform transition-all bg-emerald-800 w-60 h-60 rounded-full scale-0"></span>
  <span class="text-lg font-medium">Explore All Features</span>
</a>