Gradient CTA Button with Hover Effects

<div class="inline-flex">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');</style>
  <button type="button" class="group relative inline-flex
    shadow-[0_8px_16px_-4px_rgba(59,130,246,0.3)]
    hover:shadow-[0_12px_20px_-6px_rgba(59,130,246,0.4)]
    transition duration-300 ease-out select-none cursor-pointer
    focus-visible:outline-none focus-visible:ring-2
    focus-visible:ring-blue-400/60 transform-gpu
    hover:-translate-y-0.5 text-white rounded-lg pt-[1px]
    pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background: linear-gradient(144deg, rgba(59,130,246,0.8), rgba(59,130,246,0.4) 50%, rgba(59,130,246,0.6)); font-family: Inter, 'Helvetica Neue', sans-serif;">
    <span class="flex items-center justify-center gap-2 text-[15px]
      leading-none min-w-[140px] w-full h-full transition-colors
      duration-300 group-hover:bg-black/30 font-medium bg-black/20
      rounded-lg pt-3 pr-5 pb-3 pl-5">
      <span>Start Exploring</span>
    </span>
  </button>
</div>