32 CSS Floating Action Button Designs 10 / 32

Neon Glow FAB

Neon glow floating button for dark cyberpunk UIs with animated border glow, scan-line overlay, and Orbitron display font.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fb10">
<h1>Neon Glow FAB</h1>
<p class="fb10-sub">Cyberpunk dark UI floating action buttons — border glow, pulsing ring, fill and outline variants. Hover to intensify.</p>

<div class="fb10-scene">

  <!-- outline glow row -->
  <div class="fb10-cluster">
    <span class="fb10-cluster-title">Outline glow</span>

    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--violet fb10-nfab--scanline" aria-label="Add">
      <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--cyan fb10-nfab--scanline" aria-label="Share">
      <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--magenta fb10-nfab--scanline" aria-label="Like">
      <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--green fb10-nfab--scanline" aria-label="Check">
      <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--amber fb10-nfab--scanline" aria-label="Star">
      <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
    </button>
  </div>

  <!-- filled + pills -->
  <div class="fb10-cluster">
    <span class="fb10-cluster-title">Filled · extended pill</span>

    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--filled-violet fb10-nfab--scanline" aria-label="Upload">
      <svg viewBox="0 0 24 24" width="26" height="26" fill="white"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
    </button>

    <button class="fb10-nfab fb10-nfab--pill fb10-nfab--violet fb10-nfab--scanline" aria-label="Initialize">
      <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      Initialize
    </button>

    <button class="fb10-nfab fb10-nfab--pill fb10-nfab--cyan fb10-nfab--scanline" aria-label="Connect">
      <svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 000 10h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 000-10z"/></svg>
      Connect
    </button>

    <button class="fb10-nfab fb10-nfab--pill fb10-nfab--magenta fb10-nfab--scanline" aria-label="Launch">
      <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
      Launch
    </button>
  </div>

</div>
</div>
.fb10, .fb10 *, .fb10 *::before, .fb10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb10 {
    font-family: 'Rajdhani', sans-serif;
    background: #050508;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #c4c4c8;
    position: relative;
    overflow: hidden;
  }

  /* grid lines */
  .fb10::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }

  h1 {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px rgba(99,102,241,.8), 0 0 60px rgba(99,102,241,.4);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
  }
  p.fb10-sub {
    text-align: center;
    color: rgba(196,196,200,.5);
    font-size: .92rem;
    max-width: 44ch;
    margin: 0 auto 52px;
    line-height: 1.6;
    z-index: 2;
    position: relative;
  }

  /* ── NEON FAB base ── */
  .fb10-nfab {
    position: relative;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    outline: none;
    background: transparent;
    transition:
      transform .2s cubic-bezier(.34,1.56,.64,1),
      box-shadow .2s ease,
      filter .2s ease;
  }

  /* neon circle */
  .fb10-nfab--circle {
    width: 66px;
    height: 66px;
    border-radius: 50%;
  }
  .fb10-nfab--circle svg { width: 26px; height: 26px; position: relative; z-index: 1; }

  /* solid dark core + colored border + glow */
  .fb10-nfab--violet {
    background: #0e0c1a;
    border: 2px solid #7c3aed;
    box-shadow: 0 0 16px rgba(124,58,237,.6), 0 0 40px rgba(124,58,237,.25), inset 0 0 14px rgba(124,58,237,.12);
    color: #c4b5fd;
  }
  .fb10-nfab--violet svg { fill: #c4b5fd; }
  .fb10-nfab--violet:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(124,58,237,1), 0 0 70px rgba(124,58,237,.5), inset 0 0 20px rgba(124,58,237,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--cyan {
    background: #021218;
    border: 2px solid #06b6d4;
    box-shadow: 0 0 16px rgba(6,182,212,.6), 0 0 40px rgba(6,182,212,.25), inset 0 0 14px rgba(6,182,212,.12);
    color: #67e8f9;
  }
  .fb10-nfab--cyan svg { fill: #67e8f9; }
  .fb10-nfab--cyan:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(6,182,212,1), 0 0 70px rgba(6,182,212,.5), inset 0 0 20px rgba(6,182,212,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--magenta {
    background: #180812;
    border: 2px solid #d946ef;
    box-shadow: 0 0 16px rgba(217,70,239,.6), 0 0 40px rgba(217,70,239,.25), inset 0 0 14px rgba(217,70,239,.12);
    color: #f0abfc;
  }
  .fb10-nfab--magenta svg { fill: #f0abfc; }
  .fb10-nfab--magenta:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(217,70,239,1), 0 0 70px rgba(217,70,239,.5), inset 0 0 20px rgba(217,70,239,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--green {
    background: #041208;
    border: 2px solid #22c55e;
    box-shadow: 0 0 16px rgba(34,197,94,.6), 0 0 40px rgba(34,197,94,.25), inset 0 0 14px rgba(34,197,94,.12);
    color: #86efac;
  }
  .fb10-nfab--green svg { fill: #86efac; }
  .fb10-nfab--green:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(34,197,94,1), 0 0 70px rgba(34,197,94,.5), inset 0 0 20px rgba(34,197,94,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--amber {
    background: #140e02;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 16px rgba(245,158,11,.6), 0 0 40px rgba(245,158,11,.25), inset 0 0 14px rgba(245,158,11,.12);
    color: #fcd34d;
  }
  .fb10-nfab--amber svg { fill: #fcd34d; }
  .fb10-nfab--amber:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(245,158,11,1), 0 0 70px rgba(245,158,11,.5), inset 0 0 20px rgba(245,158,11,.2);
    filter: brightness(1.15);
  }

  /* pulse animation ring */
  .fb10-nfab::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1.5px solid currentColor;
    opacity: 0;
    animation: fb10-neon-pulse 2.8s ease-out infinite;
  }
  @keyframes fb10-neon-pulse {
    0% { transform: scale(.88); opacity: .6; }
    70% { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
  }

  /* filled neon variants */
  .fb10-nfab--filled-violet {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border: none;
    box-shadow: 0 0 24px rgba(124,58,237,.7), 0 0 60px rgba(124,58,237,.3), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .fb10-nfab--filled-violet svg { fill: #fff; }
  .fb10-nfab--filled-violet:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(124,58,237,1), 0 0 90px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* extended neon pill */
  .fb10-nfab--pill {
    width: auto;
    height: 54px;
    padding: 0 26px;
    border-radius: 27px;
    gap: 10px;
    display: flex;
    align-items: center;
    font-family: 'Orbitron', monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .fb10-nfab--pill svg { width: 18px; height: 18px; }

  /* scanning line animation on hover */
  .fb10-nfab--scanline::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    border-radius: inherit;
    transform: skewX(-15deg);
    transition: left 0s;
  }
  .fb10-nfab--scanline:hover::after {
    left: 160%;
    transition: left .5s ease;
  }

  /* ── layout ── */
  .fb10-scene { position: relative; z-index: 2; width: min(760px, 100%); }
  .fb10-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    padding: 40px 32px;
    margin-bottom: 24px;
  }
  .fb10-cluster-title {
    width: 100%;
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(196,196,200,.3);
    margin-bottom: 8px;
  }

  @media (prefers-reduced-motion: reduce) {
    .fb10-nfab, .fb10-nfab::before { animation: none; transition: none; }
    .fb10-nfab--scanline::after { display: none; }
  }

More from 32 CSS Floating Action Button Designs

Speed Dial FAB MenuMorph Expand FABSquircle FABGlassmorphism FABCompose + Tooltip FABClassic PlusSpeed DialPulse RingMorphing FABLabeled PillScroll to TopNeon Cyber
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →