VibeCoderzVibeCoderz
Telegram
All Prompts
Glow Gradient Button with Hover Effects preview
buttonctatailwindanimatedinteractivegradienthoverui

Glow Gradient Button with Hover Effects

Кнопка с градиентным свечением и эффектами при наведении. Идеальна для CTA и интерактивных UI-элементов. Использует utility-классы.

Prompt

<button class="group transition-all duration-300 hover:shadow-[0_0_40px_-5px_rgba(139,92,246,0.6)] text-lg font-medium text-white bg-black rounded-full pt-3 pr-8 pb-3 pl-8 relative">
                <!-- Gradient Border/Glow -->
                <div class="absolute inset-0 rounded-full bg-gradient-to-r from-violet-600 to-indigo-600 p-[1px] opacity-100 mask-linear">
                    <div class="h-full w-full bg-black rounded-full"></div>
                </div>
                
                <!-- Inner Fill on Hover -->
                <div class="absolute inset-0 rounded-full bg-gradient-to-r from-violet-600 to-indigo-600 opacity-20 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
                <div class="group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-r from-violet-600 to-indigo-600 opacity-90 rounded-full absolute top-0 right-0 bottom-0 left-0"></div>
                
                <!-- Top Highlight -->
                <div class="absolute inset-x-4 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>

                <span class="relative z-10 flex items-center gap-2 drop-shadow-md">
                    Initialize
                </span>
            </button>
All Prompts