VibeCoderzVibeCoderz
Telegram
All Prompts
Interactive Glow CTA Button preview
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>
All Prompts