buttonctaiconhoveranimatedresponsiveecommerce

Shop Collection Button with Arrow Icon

Кнопка CTA «Shop Collection» с анимированной стрелкой. Инвертирует цвета и сдвигает иконку при наведении. Идеально для e-commerce.

Live Preview

Prompt

<button class="group hover:bg-white hover:text-black transition-all duration-300 flex gap-2 reveal-on-scroll reveal-delay-200 text-white bg-neutral-100/20 border-white/40 border rounded-full pt-3 pr-8 pb-3 pl-8 backdrop-blur-md gap-x-2 gap-y-2 items-center">
            Shop Collection
            <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-4 h-4 group-hover:translate-x-1 transition-transform stroke-[1.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>

All Prompts