Animated Gradient Glow Button

<button class="group min-w-[180px] overflow-hidden z-10 cursor-pointer outline-none transition-all duration-300 active:scale-95 hover:shadow-[0_0_20px_rgba(220,38,38,0.4)] bg-black w-auto h-[50px] rounded-xl relative" type="button">
            <!-- Rotating Gradient Glow (Border Effect) -->
            <div class="-translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 blur-[12px] group-hover:animate-[spin_3s_linear_infinite] transition-all duration-700 bg-gradient-to-tr from-[#ef233c] via-[#ff7f51] to-[#ef233c] opacity-60 w-[250%] h-[500%] absolute top-1/2 left-1/2"></div>

            <!-- Inner Background Mask -->
            <div class="z-[1] bg-black rounded-[10px] absolute top-[1.5px] right-[1.5px] bottom-[1.5px] left-[1.5px]"></div>

            <!-- Sweep Effect -->
            <div class="absolute z-10 top-0 left-0 h-full w-24 -translate-x-32 group-hover:translate-x-[20rem] ease-in transition-all duration-1000 bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12"></div>

            <!-- Content -->
            <span class="z-20 flex items-center justify-center gap-2 text-[15px] group-hover:text-white transition-colors font-medium text-zinc-300 tracking-wide font-sans relative">
              Contact Me
            </span>
          </button>