VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient Call-to-Action Button with Icon preview
buttonctatailwindgradienthoverinteractive

Gradient Call-to-Action Button with Icon

Кнопка CTA с градиентом и иконкой. Стиль Tailwind, с анимацией при наведении. Идеальна для ключевых действий.

Prompt

<button class="group relative">
                <!-- Shadow layer -->
                <div class="blur-[1px] bg-blue-700 opacity-30 rounded-full absolute top-0 right-0 bottom-0 left-0 translate-y-1.5 blur-md"></div>
                
                <!-- Main Button -->
                <div class="hover:to-blue-500 flex gap-6 active:translate-y-[1px] transition-all text-white bg-gradient-to-b from-blue-500 to-blue-600 rounded-full pt-2 pr-2 pb-2 pl-8 relative shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_1px_2px_rgba(0,0,0,0.1)] gap-x-6 gap-y-6 items-center">
                    <span class="text-base font-medium">Deploy Application</span>
                    <div class="bg-white rounded-full p-1.5 shadow-sm group-hover:scale-105 transition-transform">
                        <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 text-blue-600 stroke-[2.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                    </div>
                </div>
            </button>
All Prompts