All Prompts
All Prompts

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>