All Prompts
All Prompts

buttonctatailwindanimatedinteractivegradient
Gradient Glow Call-to-Action Button
Кнопка CTA с градиентным свечением и анимацией. Идеальна для первичных действий, использует Tailwind-классы.
Prompt
<button class="group z-10 flex gap-2 overflow-hidden transition-all duration-300 hover:scale-[1.03] hover:shadow-[0_0_70px_-12px_#a855f7] active:scale-[0.98] text-lg font-semibold text-white bg-black h-14 ring-white/20 ring-1 rounded-full px-10 relative shadow-[0_0_50px_-12px_#a855f7] gap-x-2 gap-y-2 items-center justify-center">
<div class="absolute inset-0 bg-gradient-to-r from-indigo-600 via-purple-600 to-fuchsia-600 opacity-80 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.2),transparent_50%)] mix-blend-overlay"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,rgba(255,255,255,0.2),transparent_50%)] mix-blend-overlay"></div>
<div class="transition-all duration-300 group-hover:border-white/70 group-hover:shadow-[inset_0_0_20px_rgba(255,255,255,0.7)] border-white/50 border rounded-full absolute top-0 right-0 bottom-0 left-0 shadow-[inset_0_0_15px_rgba(255,255,255,0.5)]"></div>
<span class="relative z-10 flex items-center gap-2 drop-shadow-md leading-none">
Start Free Pilot
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1">
<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path>
<path d="m21.854 2.147-10.94 10.939" class=""></path>
</svg>
</span>
</button>