All Prompts
All Prompts

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>