Open demo

CSS code

HTML 
<button type="button" class="nb">Cyan glow</button>
<button type="button" class="nb nb-magenta">Magenta</button>
<button type="button" class="nb nb-lime">Lime</button>
<button type="button" class="nb nb-ring">Rainbow ring</button>
<button type="button" class="nb nb-flicker">Flicker sign</button>
CSS 
/* Neon buttons: a bright border and glowing label in --nb-c; hover fills the button and adds a two-layer glow. */
.nb{--nb-c:#0ff;--nb-ink:#031418;--nb-t:rgba(0,255,255,.6);--nb-glow:rgba(0,255,255,.55);
  display:inline-block;background:transparent;border:2px solid var(--nb-c);color:var(--nb-c);border-radius:12px;padding:14px 32px;
  font:inherit;font-size:.95rem;font-weight:700;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  text-shadow:0 0 8px var(--nb-t);transition:background-color .25s,color .25s,box-shadow .25s,text-shadow .25s}
.nb:hover{background:var(--nb-c);color:var(--nb-ink);box-shadow:0 0 14px var(--nb-c),0 0 44px var(--nb-glow);text-shadow:none}
.nb:focus-visible{outline:2px solid var(--nb-c);outline-offset:4px}
.nb-magenta{--nb-c:#f0f;--nb-ink:#180318;--nb-t:rgba(255,0,255,.6);--nb-glow:rgba(255,0,255,.55)}
.nb-lime{--nb-c:#adff2f;--nb-ink:#101803;--nb-t:rgba(173,255,47,.6);--nb-glow:rgba(173,255,47,.5)}
/* rainbow ring: a blurred sliding gradient (::before) peeks 2.5px out from behind a dark face (::after) */
.nb-ring{--nb-c:#fff;position:relative;isolation:isolate;border:0;color:#fff;text-shadow:none}
.nb-ring::before{content:"";position:absolute;inset:-2.5px;z-index:-2;border-radius:14px;
  background:linear-gradient(90deg,#0ff,#f0f,#adff2f,#0ff);background-size:300% 100%;filter:blur(1px);
  animation:nb-slide 3s linear infinite;transition:filter .25s}
.nb-ring::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;background:#12121c}
.nb-ring:hover{background:transparent;color:#fff;box-shadow:none}
.nb-ring:hover::before{filter:blur(4px) brightness(1.3)}
/* flicker sign: dips twice every 3.2s; stops on hover and focus */
.nb-flicker{--nb-c:#ffd60a;--nb-ink:#1a1403;--nb-t:transparent;--nb-glow:rgba(255,214,10,.5);animation:nb-flicker 3.2s infinite}
.nb-flicker:hover,.nb-flicker:focus-visible{animation:none}
@keyframes nb-slide{to{background-position:300% 0}}
@keyframes nb-flicker{0%,92%,96%,100%{opacity:1}93%,95%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.nb,.nb-ring::before{transition:none}.nb-ring::before,.nb-flicker{animation:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<button type="button" class="btn btn-neon">Cyan glow</button>
<button type="button" class="btn btn-neon btn-neon-magenta">Magenta</button>
<button type="button" class="btn btn-neon btn-neon-lime">Lime</button>
<button type="button" class="btn btn-neon btn-neon-ring">Rainbow ring</button>
<button type="button" class="btn btn-neon btn-neon-flicker">Flicker sign</button>
CSS 
/* Outline .btn in one neon colour (--nb-c): the --bs-btn-* variables handle the fill on hover, a box-shadow adds the glow. */
.btn-neon{--nb-c:#0ff;--nb-ink:#031418;--nb-t:rgba(0,255,255,.6);--nb-glow:rgba(0,255,255,.55);
  --bs-btn-padding-x:32px;--bs-btn-padding-y:14px;--bs-btn-font-size:.95rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.25;
  --bs-btn-border-width:2px;--bs-btn-border-radius:12px;--bs-btn-focus-box-shadow:none;
  --bs-btn-color:var(--nb-c);--bs-btn-bg:transparent;--bs-btn-border-color:var(--nb-c);
  --bs-btn-hover-color:var(--nb-ink);--bs-btn-hover-bg:var(--nb-c);--bs-btn-hover-border-color:var(--nb-c);
  --bs-btn-active-color:var(--nb-ink);--bs-btn-active-bg:var(--nb-c);--bs-btn-active-border-color:var(--nb-c);
  letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 8px var(--nb-t);transition:background-color .25s,color .25s,box-shadow .25s,text-shadow .25s}
.btn-neon:hover{box-shadow:0 0 14px var(--nb-c),0 0 44px var(--nb-glow);text-shadow:none}
.btn-neon:focus-visible{outline:2px solid var(--nb-c);outline-offset:4px}
.btn-neon-magenta{--nb-c:#f0f;--nb-ink:#180318;--nb-t:rgba(255,0,255,.6);--nb-glow:rgba(255,0,255,.55)}
.btn-neon-lime{--nb-c:#adff2f;--nb-ink:#101803;--nb-t:rgba(173,255,47,.6);--nb-glow:rgba(173,255,47,.5)}
.btn-neon-ring{--nb-c:#fff;--bs-btn-border-width:0;--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;
  --bs-btn-hover-bg:transparent;--bs-btn-active-bg:transparent;position:relative;isolation:isolate;text-shadow:none}
.btn-neon-ring:hover{box-shadow:none}
.btn-neon-ring::before{content:"";position:absolute;inset:-2.5px;z-index:-2;border-radius:14px;
  background:linear-gradient(90deg,#0ff,#f0f,#adff2f,#0ff);background-size:300% 100%;filter:blur(1px);
  animation:nb-slide 3s linear infinite;transition:filter .25s}
.btn-neon-ring::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;background:#12121c}
.btn-neon-ring:hover::before{filter:blur(4px) brightness(1.3)}
.btn-neon-flicker{--nb-c:#ffd60a;--nb-ink:#1a1403;--nb-t:transparent;--nb-glow:rgba(255,214,10,.5);animation:nb-flicker 3.2s infinite}
.btn-neon-flicker:hover,.btn-neon-flicker:focus-visible{animation:none}
@keyframes nb-slide{to{background-position:300% 0}}
@keyframes nb-flicker{0%,92%,96%,100%{opacity:1}93%,95%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.btn-neon,.btn-neon-ring::before{transition:none}.btn-neon-ring::before,.btn-neon-flicker{animation:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<button type="button" class="cursor-pointer rounded-xl border-2 bg-transparent px-8 py-3.5 text-[.95rem] leading-[1.25] font-bold tracking-[.06em] uppercase transition-[background-color,color,box-shadow,text-shadow] duration-[250ms] hover:[text-shadow:none] focus-visible:outline-2 focus-visible:outline-offset-4 motion-reduce:transition-none border-[#0ff] text-[#0ff] [text-shadow:0_0_8px_rgba(0,255,255,.6)] hover:bg-[#0ff] hover:text-[#031418] hover:shadow-[0_0_14px_#0ff,0_0_44px_rgba(0,255,255,.55)] focus-visible:outline-[#0ff]">Cyan glow</button>
<button type="button" class="cursor-pointer rounded-xl border-2 bg-transparent px-8 py-3.5 text-[.95rem] leading-[1.25] font-bold tracking-[.06em] uppercase transition-[background-color,color,box-shadow,text-shadow] duration-[250ms] hover:[text-shadow:none] focus-visible:outline-2 focus-visible:outline-offset-4 motion-reduce:transition-none border-[#f0f] text-[#f0f] [text-shadow:0_0_8px_rgba(255,0,255,.6)] hover:bg-[#f0f] hover:text-[#180318] hover:shadow-[0_0_14px_#f0f,0_0_44px_rgba(255,0,255,.55)] focus-visible:outline-[#f0f]">Magenta</button>
<button type="button" class="cursor-pointer rounded-xl border-2 bg-transparent px-8 py-3.5 text-[.95rem] leading-[1.25] font-bold tracking-[.06em] uppercase transition-[background-color,color,box-shadow,text-shadow] duration-[250ms] hover:[text-shadow:none] focus-visible:outline-2 focus-visible:outline-offset-4 motion-reduce:transition-none border-[#adff2f] text-[#adff2f] [text-shadow:0_0_8px_rgba(173,255,47,.6)] hover:bg-[#adff2f] hover:text-[#101803] hover:shadow-[0_0_14px_#adff2f,0_0_44px_rgba(173,255,47,.5)] focus-visible:outline-[#adff2f]">Lime</button>
<button type="button" class="cursor-pointer rounded-xl bg-transparent px-8 py-3.5 text-[.95rem] leading-[1.25] font-bold tracking-[.06em] uppercase transition-[background-color,color,box-shadow,text-shadow] duration-[250ms] hover:[text-shadow:none] focus-visible:outline-2 focus-visible:outline-offset-4 motion-reduce:transition-none relative isolate text-white before:absolute before:-inset-[2.5px] before:-z-20 before:animate-nb-slide before:rounded-[14px] before:bg-[linear-gradient(90deg,#0ff,#f0f,#adff2f,#0ff)] before:bg-[length:300%_100%] before:blur-[1px] before:transition-[filter] before:duration-[250ms] after:absolute after:inset-0 after:-z-10 after:rounded-xl after:bg-[#12121c] hover:before:blur-[4px] hover:before:brightness-130 focus-visible:outline-white motion-reduce:before:animate-none motion-reduce:before:transition-none">Rainbow ring</button>
<button type="button" class="cursor-pointer rounded-xl border-2 bg-transparent px-8 py-3.5 text-[.95rem] leading-[1.25] font-bold tracking-[.06em] uppercase transition-[background-color,color,box-shadow,text-shadow] duration-[250ms] hover:[text-shadow:none] focus-visible:outline-2 focus-visible:outline-offset-4 motion-reduce:transition-none animate-nb-flicker border-[#ffd60a] text-[#ffd60a] hover:animate-none hover:bg-[#ffd60a] hover:text-[#1a1403] hover:shadow-[0_0_14px_#ffd60a,0_0_44px_rgba(255,214,10,.5)] focus-visible:animate-none focus-visible:outline-[#ffd60a] motion-reduce:animate-none">Flicker sign</button>
CSS 
@theme {
  --animate-nb-slide: nb-slide 3s linear infinite;
  --animate-nb-flicker: nb-flicker 3.2s infinite;
  @keyframes nb-slide { to { background-position: 300% 0; } }
  @keyframes nb-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: .35; } }
}

About this set

Uppercase outline buttons for dark, gaming and nightlife designs, styled like neon tubes. Cyan, Magenta and Lime have a bright 2 pixel border and a glowing label; on hover they fill with the tube colour, switch to a near-black label and throw a two-layer glow. Rainbow ring puts a slowly sliding cyan, magenta and lime gradient behind a dark face, so only a 2.5 pixel blurred ring shows around the edge, and hovering widens the blur. Flicker sign is a yellow tube that dips in brightness twice every 3.2 seconds, like a failing sign, and holds steady while it is hovered or focused. Each tube is four custom properties: the colour, the label colour when filled, the text glow and the outer glow. The rainbow ring is drawn with two pseudo-elements inside an isolated button, the gradient below and the dark face above, so the label always sits on a dark surface. Use one or two of these as the main call to action on a dark page; a whole row of glowing buttons competes for attention. The Bootstrap version drives the fill through –bs-btn-hover-bg.

What’s included

  • Three glowing outline tubes that fill on hover
  • Rainbow ring from a blurred, sliding gradient behind a dark face
  • Flicker sign that holds steady on hover and focus
  • Four custom properties per colour
  • Animations and transitions stop under reduced motion

Accessibility

All five are native buttons named by their visible text and reachable with Tab. Focus draws a 2px outline in the tube colour 4px outside the border. With prefers-reduced-motion set, the sliding rainbow, the flicker and all hover transitions are switched off.

Customise it

Set --nb-c, --nb-ink, --nb-t and --nb-glow on a modifier class (.nb-magenta) in plain CSS or on .btn-neon-* in Bootstrap. The ring colours are in the linear-gradient on the ::before rule; in Tailwind edit the border-, text-, [text-shadow:...] and hover:shadow-[...] utilities.