All Prompts
All Prompts

buttontailwindcssgradienthoveranimatedcall-to-actioninteractive
Gradient Hover Glow CTA Button
Кнопка CTA с градиентом и эффектом свечения при наведении. Создана на Tailwind CSS для привлечения внимания на лендингах и промо-разделах.
Prompt
<div class="flex items-center justify-center min-h-screen bg-neutral-900">
<div class="inline-block relative">
<button
class="relative text-white px-6 py-3 rounded-full text-base font-medium cursor-pointer focus:outline-none min-w-[180px] h-[48px] shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] transition-all duration-500 ease-in-out hover:-translate-y-[3px]"
style="background: linear-gradient(45deg, #3B82F6, #8B5CF6, #6D28D9);"
type="button"
aria-label="Generate My Code"
title="Generate My Code"
>
<span
class="transition-opacity duration-500 hover:opacity-70 bg-[#1E1E1E] rounded-full absolute top-[1px] right-[1px] bottom-[1px] left-[1px]"
style="z-index: 0"
></span>
<span
class="absolute inset-0 rounded-full opacity-0 transition-opacity duration-500 hover:opacity-100 blur-[20px]"
style="background: linear-gradient(45deg, #3B82F6, #8B5CF6, #6D28D9); z-index: -1;"
></span>
<span class="flex items-center justify-center gap-2 z-10 relative">
Generate My Code
</span>
</button>
</div>
</div>