Cursor Spotlight
A soft radial light follows your cursor around inside the button, illuminating where you hover.
Cursor Spotlight the 18th of 21 designs in the 21 CSS Button Hover Effects collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="bhe-18__btn"> <span class="bhe-18__glow"></span> Hover Me </button>
.bhe-18__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-18__btn {
position: relative;
overflow: hidden;
}
.bhe-18__glow {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 108, 255, 0.28) 0%, transparent 70%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
transform: translate(-50%, -50%);
}
.bhe-18__btn:hover .bhe-18__glow {
opacity: 1;
} document.querySelectorAll(".bhe-18__btn").forEach(function (btn) {
const glow = btn.querySelector(".bhe-18__glow");
if (!glow) return;
btn.addEventListener("mousemove", function (e) {
const r = btn.getBoundingClientRect();
glow.style.left = e.clientX - r.left + "px";
glow.style.top = e.clientY - r.top + "px";
});
});