Animated Gradient Call-to-Action Button

<div
  class="mt-10 flex flex-wrap gap-6 items-center animate-on-scroll [animation:fadeSlideIn_1s_cubic-bezier(0.2,0.8,0.2,1)_0.5s_both]">
  <a href="#"
    class="group isolate inline-flex cursor-pointer overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_50px_10px_rgba(77,182,172,0.45)] bg-gradient-to-b from-[#2F515C] via-[#3A636E] to-[#4DB6AC] rounded-full relative shadow-[0_0_25px_rgba(47,81,92,0.3),0_8px_40px_rgba(47,81,92,0.15)]">

    <div class="absolute inset-0 overflow-hidden rounded-full">
      <div class="absolute inset-[-100%] w-[300%] h-[300%] left-[-100%] top-[-100%] animate-[spin_3s_linear_infinite]"
        style="background: conic-gradient(from 0deg, transparent 0deg, transparent 80deg, rgba(77,182,172,0.8) 180deg, transparent 280deg, transparent 360deg);">
      </div>
    </div>

    <div class="absolute inset-0 overflow-hidden rounded-full pointer-events-none z-10">
      <div
        class="absolute inset-0 translate-x-[-100%] animate-[shimmer_2.5s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent">
      </div>
    </div>

    <div class="absolute inset-[1px] rounded-full backdrop-blur-xl z-0 bg-[#1A3A45]/90"></div>

    <div
      class="z-20 flex gap-3 sm:w-auto overflow-hidden text-sm font-medium text-white w-full rounded-full pt-3 pr-5 pb-3 pl-4 relative items-center">
      <div
        class="relative z-20 w-7 h-7 rounded-full bg-gradient-to-b from-[#4DB6AC] to-[#2F515C] flex items-center justify-center shadow-lg shadow-[#4DB6AC]/30 ring-1 ring-white/20 group-hover:scale-110 transition-transform duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
          class="lucide lucide-sparkles w-3.5 h-3.5 text-white fill-white" fill="none" stroke="currentColor"
          stroke-width="2">
          <path
            d="M10.568 6.49c-.012.014-.555-.503-.568-.49l-4 4c-.013.013.504.556.49.568l9.588 9.587a2.883 2.883 0 1 0 4.078-4.077z">
          </path>
        </svg>
      </div>

      <span class="whitespace-nowrap relative z-10 font-medium tracking-tight text-base text-white/95 group-hover:text-white transition-colors">
        Start Creating
      </span>

      <span class="inline-flex items-center justify-center z-10 bg-white/10 w-6 h-6 rounded-full ml-1 relative group-hover:translate-x-0.5 transition-transform text-white/80 group-hover: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" class="lucide lucide-arrow-right w-3 h-3">
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </span>
    </div>
  </a>
</div>

<style>
  @keyframes shimmer {
    0% {
      transform: translateX(-100%) skewX(-15deg);
    }

    100% {
      transform: translateX(100%) skewX(-15deg);
    }
  }
</style>