Hover-Animated Call-to-Action Button

<div class="relative inline-block group">

  <div
    class="absolute inset-0 border border-dashed border-amber-500 translate-x-1 translate-y-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
  </div>

  <button class="relative bg-transparent border border-gray-700 text-zinc-300 px-8 py-3 font-bold uppercase tracking-widest overflow-hidden transition-all duration-300 group-hover:border-amber-500 group-hover:translate-x-[-2px] group-hover:translate-y-[-2px]">

       <div class="group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-0 group-hover:translate-y-0 opacity-0 w-2 h-2 border-[#F97316] border-r border-b absolute right-0 bottom-0 translate-x-1 translate-y-1"></div>

        <div class="relative z-10 flex items-center gap-2 group-hover:text-slate-400 transition-colors amber-500/30">
            <span>Start Creating</span>
<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-up-right" aria-hidden="true" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
            <iconify-icon icon="solar:arrow-right-bold" class="text-xl transition-transform duration-300 group-hover:translate-x-1"></iconify-icon>
        </div>
    </button>

</div>