All Prompts
All Prompts

buttontailwindinteractiveanimatedctahoverglowui
Interactive Glow CTA Button
Интерактивная кнопка CTA с эффектом свечения, отслеживающим курсор. Идеально для лендингов, hero-секций, форм регистрации.
Prompt
<div class="relative inline-block group">
<!-- BUTTON -->
<button class="cursor-glow-btn relative z-10 overflow-hidden shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[transform] duration-150 ease-out active:scale-[0.98] text-white bg-neutral-900/60 border-white/20 border rounded-xl pt-3 pr-6 pb-3 pl-6" style="--x: 74.3125px; --y: 7.1015625px; --o: 0;" onmousemove="btnMove(event)" onmouseenter="this.style.setProperty('--o','1')" onmouseleave="this.style.setProperty('--o','0')">
<span class="relative z-10 inline-flex items-center gap-2 font-semibold">
Book A Free Call
<svg class="h-5 w-5 transition-transform duration-200 ease-out group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M13 5l7 7-7 7" class=""></path>
</svg>
</span>
<!-- thin bottom line expands from center -->
<span class="pointer-events-none absolute bottom-0 left-1/2 right-1/2 h-px bg-gradient-to-r from-transparent via-white to-transparent opacity-80 transition-[left,right] duration-500 ease-out group-hover:left-0 group-hover:right-0"></span>
<!-- FOLLOW-CURSOR inner glow (clipped by button radius) -->
<span class="glow pointer-events-none absolute inset-0 -z-10" aria-hidden="true"></span>
</button>
<!-- OUTSIDE BLOOM (bottom middle, outside the border) -->
<span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 rounded-full opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100" style="
background:
radial-gradient(60% 100% at 50% 50%,
rgba(255,255,255,.55), rgba(255,255,255,.28) 35%, transparent 70%);
filter: blur(10px) saturate(120%);
" aria-hidden="true"></span>
</div>