VibeCoderzVibeCoderz
Telegram
All Prompts
Animated CTA Button with Hover Glow Effect preview
buttonctatailwindhoveranimatedglowinteractive

Animated CTA Button with Hover Glow Effect

Анимированная CTA кнопка с эффектом свечения при наведении. UI-компонент на Tailwind CSS для привлечения внимания пользователей на лендингах.

Prompt

<div class="relative inline-block group">
            <button class="animate-[slideInBlur_0.8s_ease-out_1.2s_forwards] relative z-10 overflow-hidden 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 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]" style="--x: 199.6484375px; --y: 12px; --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" style="">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>
              <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>
              <span class="glow pointer-events-none absolute inset-0 -z-10" aria-hidden="true" style="transform: scale(0.95) translate(0px, -24px);"></span>
            </button>
            <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>
All Prompts