Neon Cyberpunk Buttons
Glowing outlined neon buttons that flood with color on hover — a retro-futuristic favourite.
<div class="neon-row"><button class="neon">ENTER</button><button class="neon n2">SYSTEM</button></div>body{background:#07070f}
.neon-row{display:flex;gap:20px}
.neon{position:relative;font:700 16px/1 ui-monospace,monospace;letter-spacing:3px;color:#0ff;background:transparent;border:2px solid #0ff;border-radius:8px;padding:15px 30px;cursor:pointer;text-shadow:0 0 8px #0ff;box-shadow:0 0 12px rgba(0,255,255,.5),inset 0 0 12px rgba(0,255,255,.2);transition:.3s}
.neon:hover{background:#0ff;color:#07070f;text-shadow:none;box-shadow:0 0 24px #0ff,0 0 48px #0ff}
.neon.n2{color:#f0f;border-color:#f0f;text-shadow:0 0 8px #f0f;box-shadow:0 0 12px rgba(255,0,255,.5),inset 0 0 12px rgba(255,0,255,.2)}
.neon.n2:hover{background:#f0f;color:#07070f;box-shadow:0 0 24px #f0f,0 0 48px #f0f}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.