Dark Gradient CTA Button with Arrow Icon

<a href="#" class="group inline-flex items-center gap-2 transition relative overflow-hidden cursor-pointer text-base font-bold text-white border-[#292929] border pt-0 pb-0" style="position: relative; padding: 1rem 2rem; background: linear-gradient(to bottom, #171717, #242424); border-radius: 9999px; box-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center;">
  Get Started Now
  <span class="absolute transition-all duration-300 group-hover:w-[calc(100%-0.6em)] active:scale-95 inner-button" style="position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #171717, #242424); width: 40px; height: 40px; margin-left: 10px; border-radius: 50%; box-shadow: 0 0 1px rgba(0, 0, 0, 1); border: 1px solid #252525; transition: all 0.2s ease;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-[1.1em] h-[1.1em] text-white icon transition-transform duration-300 group-hover:translate-x-[0.1em]" style="filter: drop-shadow(0 10px 20px rgba(26, 25, 25, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 1)); transition: all 0.4s ease-in-out;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
  </span>
  <style>
    #aura-emf3lc6zk::before {
      content: "";
      position: absolute;
      top: -2px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      background: linear-gradient(to bottom, #292929, #000000);
      z-index: -1;
      border-radius: 9999px;
      transition: all 0.2s ease;
      opacity: 1;
    }
    #aura-emf3lc6zk:active {
      transform: translateY(2px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 5px 10px rgba(0, 0, 0, 0.4);
    }
    #aura-emf3lc6zk .inner-button::before {
      content: "";
      position: absolute;
      top: -2px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      background: linear-gradient(to bottom, #292929, #000000);
      z-index: -1;
      border-radius: 9999px;
      transition: all 0.2s ease;
      opacity: 1;
    }
    #aura-emf3lc6zk .icon:hover {
      filter: drop-shadow(0 10px 20px rgba(50, 50, 50, 1)) drop-shadow(0 0 20px rgba(2, 2, 2, 1));
      transform: rotate(-35deg);
    }
  </style>
</a>