27 CSS Button Hover Effects 03 / 27

Neo-Brutalist & Cyberpunk Button Glow Effects

Loud, attention-grabbing CTA effects on a high-contrast yellow surface — brutalist offset-shadow shift, cyberpunk cyan neon glow, a skewed glitch via filter: drop-shadow(), and an animated gradient border clip.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<section class="bhe-ncg" aria-label="Neo-brutalist cyberpunk button glow effects demo">
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__brutal"  type="button">Ship It</button><span class="bhe-ncg__label">Brutalist Shift</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__neon"    type="button">Connect</button><span class="bhe-ncg__label">Cyberpunk Glow</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__glitch"  type="button">Execute</button><span class="bhe-ncg__label">Glitch Shadow</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__clip"    type="button">Launch</button><span class="bhe-ncg__label">Gradient Clip</span></div>
</section>

<section class="bhe-ncg" aria-label="Neo-brutalist cyberpunk button glow effects demo">
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__brutal"  type="button">Ship It</button><span class="bhe-ncg__label">Brutalist Shift</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__neon"    type="button">Connect</button><span class="bhe-ncg__label">Cyberpunk Glow</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__glitch"  type="button">Execute</button><span class="bhe-ncg__label">Glitch Shadow</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__clip"    type="button">Launch</button><span class="bhe-ncg__label">Gradient Clip</span></div>
</section>

.bhe-ncg {
  --bhe-ncg-bg: #f5f54a;
  --bhe-ncg-ink: #000000;
  --bhe-ncg-surface: #ffffff;
  --bhe-ncg-muted: #333;
  --bhe-ncg-neon: #ff2e88;
  --bhe-ncg-cyan: #00fff0;

  background: var(--bhe-ncg-bg); color: var(--bhe-ncg-ink);
  font-family: 'Courier New', monospace;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-ncg *, .bhe-ncg *::before, .bhe-ncg *::after { box-sizing: border-box; }
.bhe-ncg__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-ncg__label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--bhe-ncg-muted); text-transform: uppercase; font-weight: 700; }
.bhe-ncg__btn { font-family: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }

/* 1: brutalist offset shadow */
.bhe-ncg__brutal {
  background: var(--bhe-ncg-surface); color: var(--bhe-ncg-ink);
  border: 3px solid var(--bhe-ncg-ink); padding: 1rem 2.4rem;
  box-shadow: 6px 6px 0 var(--bhe-ncg-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bhe-ncg__brutal:hover  { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--bhe-ncg-neon); }
.bhe-ncg__brutal:active { transform: translate(6px,6px); box-shadow: 0 0 0 var(--bhe-ncg-ink); }

/* 2: neon glow */
.bhe-ncg__neon {
  background: transparent; color: var(--bhe-ncg-cyan);
  border: 2px solid var(--bhe-ncg-cyan); padding: 1rem 2.4rem;
  text-shadow: 0 0 4px var(--bhe-ncg-cyan);
  transition: 0.3s;
}
.bhe-ncg__neon:hover {
  background: var(--bhe-ncg-cyan); color: #001f1d;
  box-shadow: 0 0 8px var(--bhe-ncg-cyan), 0 0 24px var(--bhe-ncg-cyan), 0 0 48px var(--bhe-ncg-cyan);
  text-shadow: none;
}

/* 3: glitch drop-shadow */
.bhe-ncg__glitch {
  position: relative;
  background: var(--bhe-ncg-ink); color: var(--bhe-ncg-bg);
  border: none; padding: 1rem 2.4rem;
  transition: 0.15s;
}
.bhe-ncg__glitch:hover {
  filter: drop-shadow(3px 0 var(--bhe-ncg-neon)) drop-shadow(-3px 0 var(--bhe-ncg-cyan));
  transform: skewX(-3deg);
}

/* 4: gradient border clip — two-layer background trick so the gradient
   "border" sits inside the same stacking context as the button text.
   The outer layer is the moving gradient; the inner layer is the solid
   button fill, clipped to padding-box. background-clip + background-origin
   are paired so each layer maps to a different clipping region.
   Replaces an older z-index:-1 ::before that disappeared behind the
   .bhe-ncg wrapper's stacking context. */
.bhe-ncg__clip {
  position: relative;
  color: var(--bhe-ncg-ink);
  border: 3px solid transparent;
  padding: 1rem 2.4rem;
  background-image:
    linear-gradient(var(--bhe-ncg-surface), var(--bhe-ncg-surface)),
    linear-gradient(120deg, var(--bhe-ncg-neon), var(--bhe-ncg-cyan), var(--bhe-ncg-neon));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.5s ease, filter 0.3s ease;
}
.bhe-ncg__clip:hover {
  background-position: 0 0, 100% 0;
  filter: drop-shadow(0 0 10px var(--bhe-ncg-neon));
}

@media (prefers-reduced-motion: reduce) {
  .bhe-ncg__brutal, .bhe-ncg__neon, .bhe-ncg__glitch, .bhe-ncg__clip { transition: none; }
}

.bhe-ncg {
  --bhe-ncg-bg: #f5f54a;
  --bhe-ncg-ink: #000000;
  --bhe-ncg-surface: #ffffff;
  --bhe-ncg-muted: #333;
  --bhe-ncg-neon: #ff2e88;
  --bhe-ncg-cyan: #00fff0;

  background: var(--bhe-ncg-bg); color: var(--bhe-ncg-ink);
  font-family: 'Courier New', monospace;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-ncg *, .bhe-ncg *::before, .bhe-ncg *::after { box-sizing: border-box; }
.bhe-ncg__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-ncg__label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--bhe-ncg-muted); text-transform: uppercase; font-weight: 700; }
.bhe-ncg__btn { font-family: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }

/* 1: brutalist offset shadow */
.bhe-ncg__brutal {
  background: var(--bhe-ncg-surface); color: var(--bhe-ncg-ink);
  border: 3px solid var(--bhe-ncg-ink); padding: 1rem 2.4rem;
  box-shadow: 6px 6px 0 var(--bhe-ncg-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bhe-ncg__brutal:hover  { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--bhe-ncg-neon); }
.bhe-ncg__brutal:active { transform: translate(6px,6px); box-shadow: 0 0 0 var(--bhe-ncg-ink); }

/* 2: neon glow */
.bhe-ncg__neon {
  background: transparent; color: var(--bhe-ncg-cyan);
  border: 2px solid var(--bhe-ncg-cyan); padding: 1rem 2.4rem;
  text-shadow: 0 0 4px var(--bhe-ncg-cyan);
  transition: 0.3s;
}
.bhe-ncg__neon:hover {
  background: var(--bhe-ncg-cyan); color: #001f1d;
  box-shadow: 0 0 8px var(--bhe-ncg-cyan), 0 0 24px var(--bhe-ncg-cyan), 0 0 48px var(--bhe-ncg-cyan);
  text-shadow: none;
}

/* 3: glitch drop-shadow */
.bhe-ncg__glitch {
  position: relative;
  background: var(--bhe-ncg-ink); color: var(--bhe-ncg-bg);
  border: none; padding: 1rem 2.4rem;
  transition: 0.15s;
}
.bhe-ncg__glitch:hover {
  filter: drop-shadow(3px 0 var(--bhe-ncg-neon)) drop-shadow(-3px 0 var(--bhe-ncg-cyan));
  transform: skewX(-3deg);
}

/* 4: gradient border clip — two-layer background trick so the gradient
   "border" sits inside the same stacking context as the button text.
   The outer layer is the moving gradient; the inner layer is the solid
   button fill, clipped to padding-box. background-clip + background-origin
   are paired so each layer maps to a different clipping region.
   Replaces an older z-index:-1 ::before that disappeared behind the
   .bhe-ncg wrapper's stacking context. */
.bhe-ncg__clip {
  position: relative;
  color: var(--bhe-ncg-ink);
  border: 3px solid transparent;
  padding: 1rem 2.4rem;
  background-image:
    linear-gradient(var(--bhe-ncg-surface), var(--bhe-ncg-surface)),
    linear-gradient(120deg, var(--bhe-ncg-neon), var(--bhe-ncg-cyan), var(--bhe-ncg-neon));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.5s ease, filter 0.3s ease;
}
.bhe-ncg__clip:hover {
  background-position: 0 0, 100% 0;
  filter: drop-shadow(0 0 10px var(--bhe-ncg-neon));
}

@media (prefers-reduced-motion: reduce) {
  .bhe-ncg__brutal, .bhe-ncg__neon, .bhe-ncg__glitch, .bhe-ncg__clip { transition: none; }
}

More from 27 CSS Button Hover Effects

Particle Burst Slide Doors Hard Shadow Shift Rainbow Border Spin Morph Shape Icon Slide In Stagger Fill Sunburst Expand 3D Press Typewriter Retype Ripple Wave Cursor Spotlight

View the full collection →