27 CSS Button Hover Effects 24 / 27
Cursor Spotlight
A soft radial light follows your cursor around inside the button, illuminating where you hover.
The code
<button class="bhe-24__btn"> <span class="bhe-24__glow"></span> Hover Me </button>
<button class="bhe-24__btn">
<span class="bhe-24__glow"></span>
Hover Me
</button>.bhe-24__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-24__btn {
position: relative;
overflow: hidden;
}
.bhe-24__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-24__btn:hover .bhe-24__glow {
opacity: 1;
} .bhe-24__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-24__btn {
position: relative;
overflow: hidden;
}
.bhe-24__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-24__btn:hover .bhe-24__glow {
opacity: 1;
}document.querySelectorAll(".bhe-24__btn").forEach(function (btn) {
const glow = btn.querySelector(".bhe-24__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";
});
}); document.querySelectorAll(".bhe-24__btn").forEach(function (btn) {
const glow = btn.querySelector(".bhe-24__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";
});
});More from 27 CSS Button Hover Effects
Sliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button EffectsKinetic Text Flip & Icon Reveal Button EffectsLiquid FillMagnetic BorderGlitch SliceNeon PulseSplit RevealDiagonal ShutterElastic LiftCenter Underline Draw3D Flip
View the full collection →