← All elements
<button class="no">Connect</button>About this button
A glowing outlined button that floods with colour and a brighter halo on hover.
How it works
A two-pixel border and matching text colour share one cyan, and two box-shadows add the glow: an outer halo and an inset one. On hover the background fills with the same cyan, the text flips to the dark page colour and the outer shadow grows into a much wider halo.
Ways to customise it
- Replace #22d3ee with any bright hue for a different neon.
- Raise the blur values for a stronger glow.
- Remove text-transform for sentence-case labels.
Good to know
Glow effects look best on dark backgrounds and wash out on light ones. The text colour flip on hover keeps contrast above 4.5 to 1. Do not rely on the glow alone to show focus, which is why an outline is added too.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.