5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven ways to make a button glow: a spinning conic-gradient ring, a neon glow on hover, a pulsing ring for a live action, a beam of light that runs round the edge, a soft coloured glow for light pages, a glow that follows the cursor and a glow that marks the selected option.
A conic gradient spins behind the button and only a 2px ring of it shows, with a blurred copy underneath for the glow. The angle is a registered @property so the browser can animate it; browsers without @property show the ring standing still.
At rest this is a plain outlined button. On hover and focus the border turns cyan and stacked box-shadows, one tight, one wide and one inset, create a neon glow. Animating box-shadow is acceptable here because the transition is short and only runs on interaction.
A ring of glow expands from the button and fades every two seconds, to draw the eye to a single action such as Go live. The ring is an animated box-shadow on a pseudo-element. Use it sparingly, and never on more than one button in view.
A narrow beam of light travels around the border: a conic gradient with one bright slice, masked so only a 1.5px ring is visible. The mask is two layers combined with exclude, which cuts the inside out and leaves the button background untouched.
On a light page a neon glow looks out of place, so this one uses a coloured, blurred shadow under the button instead. The shadow is the button colour at low opacity and grows slightly on hover, which reads as glow and lift together.
A radial highlight on the border follows the pointer. A few lines of script write the pointer position into two custom properties, and the border is a masked radial gradient centred on them. Without JavaScript the button simply has a plain border.
var b = document.querySelector('.gbb6');
b.addEventListener('pointermove', function (e) {
var r = b.getBoundingClientRect();
b.style.setProperty('--x', (e.clientX - r.left) + 'px');
b.style.setProperty('--y', (e.clientY - r.top) + 'px');
});
07. Glowing Selected Option
GlowGroup
Glow as a selection state: three billing buttons in a group, and the one with aria-pressed set to true glows. Clicking moves the glow, and the pressed state is announced, so the highlight is never the only cue.
document.querySelectorAll('.gbb7 button').forEach(function (b, _, all) {
b.addEventListener('click', function () { all.forEach(function (x) { x.setAttribute('aria-pressed', x === b ? 'true' : 'false'); }); });
});
About these CSS Glowing Border Buttons
Animated borders with @property
A conic gradient can only rotate smoothly if the browser knows its angle is an angle. Register it with @property and animate the custom property; browsers without support show the same ring, just still.
Masking a ring
To show a gradient only on the border, put it on a pseudo-element with padding equal to the border width and mask out the content box. Two mask layers with exclude (or xor in older WebKit) leave just the ring.
Glow is box-shadow
Most glows are stacked box-shadows: a tight one for the bright edge, a wide blurred one for the halo and sometimes an inset one inside. Coloured, low-opacity shadows read as glow on light backgrounds too.
One glowing thing at a time
Glow pulls the eye. Use it on one primary action or to mark a selected state, and never make it the only signal: pair it with a border colour, a label or aria-pressed.
Frequently asked questions
Why does the border not rotate in my browser?
Rotation needs @property, supported in all current major browsers. Older versions show a static ring.
Are glowing buttons accessible?
They can be: each demo keeps readable text, a visible focus outline and a reduced-motion fallback.
Will the glow get cut off?
Glows extend outside the button, so leave some space around it or the parent's overflow: hidden will clip them.