15 CSS Glowing Border Buttons02 / 15

Pure CSSMIT licensed

Neon Pulse Glow Button on Hover

The esports lobby classic: a cyan sign-tube button that snaps to full neon on hover — four stacked box-shadow layers, a matching text-shadow, and a heartbeat pulse that keeps throbbing while the cursor stays. Reads exactly like a bent-glass sign because the shadow layers mimic how real neon light falls off.

Published

Live Demo
Try it

The code

<section class="gbb-02" aria-label="Neon pulse glow button demo">
  <button class="gbb-02__btn" type="button">Enter the Arena</button>
</section>
.gbb-02,
.gbb-02 *,
.gbb-02 *::before,
.gbb-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gbb-02 {
  --neon: oklch(0.85 0.15 195);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: radial-gradient(60% 80% at 50% 100%,oklch(0.2 0.05 220 / .7),transparent 60%),oklch(0.12 0.02 250);
}

.gbb-02 .gbb-02__btn {
  cursor: pointer;
  padding: 15px 36px;
  border-radius: 12px;
  border: 2px solid var(--neon);
  background: color-mix(in oklab,var(--neon) 6%,transparent);
  font: 700 15px/1 'Segoe UI',system-ui,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #eafcff;
  text-shadow: 0 0 8px color-mix(in oklab,var(--neon) 70%,transparent);
  box-shadow: 0 0 6px color-mix(in oklab,var(--neon) 35%,transparent),0 0 18px color-mix(in oklab,var(--neon) 18%,transparent),inset 0 0 10px color-mix(in oklab,var(--neon) 12%,transparent);
  transition: box-shadow .2s ease,text-shadow .2s ease,background .2s ease;
}

.gbb-02 .gbb-02__btn:hover,
.gbb-02 .gbb-02__btn:focus-visible {
  background: color-mix(in oklab,var(--neon) 12%,transparent);
  text-shadow: 0 0 6px var(--neon),0 0 20px color-mix(in oklab,var(--neon) 80%,transparent);
  animation: gbb02-pulse 1.6s ease-in-out .2s infinite;
  box-shadow: 0 0 6px var(--neon),0 0 22px color-mix(in oklab,var(--neon) 60%,transparent),0 0 48px color-mix(in oklab,var(--neon) 35%,transparent),inset 0 0 16px color-mix(in oklab,var(--neon) 20%,transparent);
}

.gbb-02 .gbb-02__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.gbb-02 .gbb-02__btn:active {
  transform: scale(.97);
}

@keyframes gbb02-pulse {
  0%,
    100% {
    box-shadow: 0 0 6px var(--neon),0 0 22px color-mix(in oklab,var(--neon) 60%,transparent),0 0 48px color-mix(in oklab,var(--neon) 35%,transparent),inset 0 0 16px color-mix(in oklab,var(--neon) 20%,transparent);
  }

  50% {
    box-shadow: 0 0 8px var(--neon),0 0 32px color-mix(in oklab,var(--neon) 75%,transparent),0 0 72px color-mix(in oklab,var(--neon) 50%,transparent),inset 0 0 22px color-mix(in oklab,var(--neon) 28%,transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gbb-02 .gbb-02__btn:hover,
    .gbb-02 .gbb-02__btn:focus-visible {
    animation: none;
  }
}
/* No JavaScript — layered box-shadow + text-shadow mimic neon falloff; an infinite keyframe pulses only the outer halo layers on hover. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Glowing Border Button from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Neon Pulse Glow Button on Hover
Source: https://codefronts.com/components/css-glowing-border-buttons/neon-pulse-glow-button-on-hover/

The esports lobby classic: a cyan sign-tube button that snaps to full neon on hover — four stacked box-shadow layers, a matching text-shadow, and a heartbeat pulse that keeps throbbing while the cursor stays. Reads exactly like a bent-glass sign because the shadow layers mimic how real neon light falls off.
## HTML
```html
<section class="gbb-02" aria-label="Neon pulse glow button demo">
  <button class="gbb-02__btn" type="button">Enter the Arena</button>
</section>
```
## CSS
```css
.gbb-02,
.gbb-02 *,
.gbb-02 *::before,
.gbb-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gbb-02 {
  --neon: oklch(0.85 0.15 195);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: radial-gradient(60% 80% at 50% 100%,oklch(0.2 0.05 220 / .7),transparent 60%),oklch(0.12 0.02 250);
}

.gbb-02 .gbb-02__btn {
  cursor: pointer;
  padding: 15px 36px;
  border-radius: 12px;
  border: 2px solid var(--neon);
  background: color-mix(in oklab,var(--neon) 6%,transparent);
  font: 700 15px/1 'Segoe UI',system-ui,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #eafcff;
  text-shadow: 0 0 8px color-mix(in oklab,var(--neon) 70%,transparent);
  box-shadow: 0 0 6px color-mix(in oklab,var(--neon) 35%,transparent),0 0 18px color-mix(in oklab,var(--neon) 18%,transparent),inset 0 0 10px color-mix(in oklab,var(--neon) 12%,transparent);
  transition: box-shadow .2s ease,text-shadow .2s ease,background .2s ease;
}

.gbb-02 .gbb-02__btn:hover,
.gbb-02 .gbb-02__btn:focus-visible {
  background: color-mix(in oklab,var(--neon) 12%,transparent);
  text-shadow: 0 0 6px var(--neon),0 0 20px color-mix(in oklab,var(--neon) 80%,transparent);
  animation: gbb02-pulse 1.6s ease-in-out .2s infinite;
  box-shadow: 0 0 6px var(--neon),0 0 22px color-mix(in oklab,var(--neon) 60%,transparent),0 0 48px color-mix(in oklab,var(--neon) 35%,transparent),inset 0 0 16px color-mix(in oklab,var(--neon) 20%,transparent);
}

.gbb-02 .gbb-02__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.gbb-02 .gbb-02__btn:active {
  transform: scale(.97);
}

@keyframes gbb02-pulse {
  0%,
    100% {
    box-shadow: 0 0 6px var(--neon),0 0 22px color-mix(in oklab,var(--neon) 60%,transparent),0 0 48px color-mix(in oklab,var(--neon) 35%,transparent),inset 0 0 16px color-mix(in oklab,var(--neon) 20%,transparent);
  }

  50% {
    box-shadow: 0 0 8px var(--neon),0 0 32px color-mix(in oklab,var(--neon) 75%,transparent),0 0 72px color-mix(in oklab,var(--neon) 50%,transparent),inset 0 0 22px color-mix(in oklab,var(--neon) 28%,transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gbb-02 .gbb-02__btn:hover,
    .gbb-02 .gbb-02__btn:focus-visible {
    animation: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — layered box-shadow + text-shadow mimic neon falloff; an infinite keyframe pulses only the outer halo layers on hover. */
```

How this works

Real neon has three visible zones — the tube, a tight hot halo, and a wide soft wash. The button copies that with stacked shadows: box-shadow: 0 0 6px, 0 0 18px, 0 0 42px, inset 0 0 14px, all the same accent color at falling opacity. The inset layer is the secret ingredient — it lights the button's interior like gas inside the tube. The label gets the same treatment with text-shadow so type and border read as one fixture.

At rest the shadows sit at low opacity (a sign that's switched on but idle). Hover transitions them up in 200ms, then hands off to an infinite @keyframes pulse that oscillates only the two outer layers — the tube itself stays steady, which is what keeps it looking like electricity rather than a blinking error state. Everything is color-derived from one --neon variable via color-mix(), so re-skinning to hot pink or lime is a one-line edit.

Make it yours

  • One-variable reskin: set --neon to oklch(0.72 0.28 340) for hot pink or oklch(0.85 0.26 135) for lime.
  • Pulse tempo: 1.6s reads like breathing; 0.7s reads like an alarm — match your game's energy.
  • For an 'always-on' sign, move the hover shadow values onto the resting state and keep hover for the pulse only.
  • Pair with a dark textured background — neon needs darkness; on white it just looks blurry.

Gotchas — read before shipping

  • Animating box-shadow repaints — fine for one CTA, but don't pulse 50 grid cards at once; pulse only on hover like this demo.
  • Keep text white-ish with a colored text-shadow; coloring the glyphs themselves tanks contrast and legibility.
  • The inset glow needs a translucent (not solid) button fill, or it gets painted over.

Browser support

ChromeSafariFirefoxEdge
111+16.4+113+111+

Versions gate oklch()/color-mix(). Swap those for hex and the technique works in every engine back to 2012.

Techniques used in this demo

color-mix()MDN ↗radial-gradient()MDN ↗@keyframesMDN ↗place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →