VibeCoderzVibeCoderz
Telegram
All Prompts
Flashlight Button with blue glow preview
buttonctaanimatedinteractivelandingcomponent

Flashlight Button with blue glow

Кнопка CTA с сиянием: круглая кнопка с эффектом луча света для привлечения внимания. Идеальна для лендингов, регистрации на ранний доступ.

Prompt

<!-- CTA buttons -->
<div
  class="flex flex-wrap gap-4 reveal-on-scroll delay-300 is-visible mb-14 gap-x-4 gap-y-4 items-center justify-center">
  <style>
    /* 19. SPOTLIGHT — BLUE GLOW VERSION */
    .btn-spotlight {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.9rem 2rem;
      width: 100%;
      background: rgba(20, 20, 20, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.35);
      /* WHITE border */
      border-radius: 9999px;
      /* FULL ROUND */
      color: #aaa;
      font-size: 0.9rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      overflow: hidden;
      transition: color .3s ease, border-color .3s ease;
      backdrop-filter: blur(6px);
    }

    .btn-spotlight:hover {
      color: #fff;
      border-color: rgba(120, 180, 255, 0.6);
      /* Slight blue tint on hover */
    }

    /* BLUE spotlight beam on hover */
    .spotlight-beam {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .35s ease-out;

      background:
        radial-gradient(circle at var(--x, 50%) var(--y, 50%),
          rgba(120, 180, 255, 0.35) 0%,
          /* bright blue center */
          rgba(80, 140, 255, 0.18) 22%,
          /* soft fade */
          rgba(0, 0, 0, 0.0) 55%);
    }

    .btn-spotlight:hover .spotlight-beam {
      opacity: 1;
    }
  </style>

  <div class="btn-wrapper rounded-full" style="max-width:260px">
    <button class="btn-spotlight btn-size-2 rounded-full" id="spotBtn">
    <div class="spotlight-beam"></div>
    <span style="position:relative; pointer-events:none;">Join Waitlist</span>
  </button>
  </div>

  <script>
    /* Mouse-tracking spotlight */
const spotBtn = document.getElementById("spotBtn");

spotBtn.addEventListener("mousemove", (e) => {
  const rect = spotBtn.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  spotBtn.style.setProperty("--x", `${x}px`);
  spotBtn.style.setProperty("--y", `${y}px`);
});
  </script>
All Prompts