34 CSS Floating Buttons
18 / 34

All 34 in 34 CSS Floating Buttons

  1. 01Material Design 3 Floating Action Button (FAB)
  2. 02iOS-Style Compose Floating Button
  3. 03WhatsApp Floating Message Button CSS
  4. 04Intercom / Drift Chat Bubble Floating Button
  5. 05Accessible WAI-ARIA Floating Action Button (WCAG 2.2)
  6. 06Extended FAB with Icon and Label (Material Design 3)
  7. 07Speed Dial Radial Menu FAB with Backdrop
  8. 08Pure CSS FAB Speed Dial (No JavaScript)
  9. 09Material Gradient Floating Action Button CSS
  10. 10Vertical and Horizontal Speed Dial FAB Menu CSS
  11. 11Morphing FAB Button That Expands to Pill CSS
  12. 12Scroll-to-Top Floating Button with SVG Progress Ring
  13. 13Floating Chat Widget FAB with Notification Panel
  14. 14Fan and Arc Radial Spread FAB Menu CSS
  15. 15Apple Squircle Superellipse Floating Button CSS
  16. 16Social Share Floating Button Cluster CSS
  17. 17Glassmorphism Floating Action Button with Backdrop Blur
  18. 18Cyberpunk Neon Glow Floating Button CSS
  19. 19Floating Compose Button with Tooltip on Hover CSS
  20. 20Draggable Floating Action Button with Corner Snap CSS
  21. 21Notification Bell Floating Button with Badge Counter
  22. 22Floating Cart Button with Live Badge Counter CSS
  23. 23Magnetic Cursor Follower Floating Button CSS
  24. 24Dark Mode Theme Toggle Floating Button CSS
  25. 25Classic Gradient Circle Plus FAB CSS
  26. 26Pulse Ring Attention-Getter Floating Button CSS
  27. 27Pill-Shaped FAB with Icon and Text Label CSS
  28. 28Neo-Brutalist Hard Shadow Floating Button CSS
  29. 29Floating Button with Loading Spinner State CSS
  30. 30Draggable Floating Button with 6-Dot Grip Handle CSS
  31. 31Voice Recording Microphone Floating Button CSS
  32. 32Aurora Gradient Drift Premium Floating Button CSS
  33. 33Quick Emoji Reply Reaction Floating Button CSS
  34. 34Modern Squircle Rounded Square FAB CSS
Pure CSSMIT licensed

Cyberpunk Neon Glow Floating Button CSS

Neon that looks like a gas tube rather than a coloured box-shadow: a bright near-white core, a saturated mid-glow, and a wide dim halo — three layers with different blur radii, exactly how a real sign photographs. Plus a restrained startup flicker, a scanline sweep, and a hover that ramps the current up instead of just changing colour.

Live Demo
Try it

Nucleo: 44,000+ SVG icons in five families · All Icons Bundle $149

Nucleo · Affiliate link

Get the Nucleo bundle

The code

<section class="fb-18" aria-label="Cyberpunk neon floating button demo">
  <div class="fb-18__grid" aria-hidden="true"></div>
  <div class="fb-18__stage">
    <p class="fb-18__eyebrow">three-layer falloff · 400ms warm-up</p>
    <h2 class="fb-18__title">Neon<span class="fb-18__flick">_</span>district</h2>
    <p class="fb-18__sub">A hot near-white core, a saturated mid glow and a wide dim halo. Same three layers a real sign shows on camera.</p>
    <div class="fb-18__row">
      <button class="fb-18__fab" type="button" aria-label="Execute command">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 2L4.5 13.5H11l-1 8.5 8.5-11.5H12z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
      </button>
      <button class="fb-18__fab fb-18__fab--cyan" type="button" aria-label="Scan network">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="6.6" fill="none" stroke="currentColor" stroke-width="1.9"/><path d="M15.8 15.8L21 21" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
      </button>
      <button class="fb-18__fab fb-18__fab--amber fb-18__fab--off" type="button" aria-label="Power, unlit until hover">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M6.6 6.8a7.5 7.5 0 1 0 10.8 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
      </button>
    </div>
    <p class="fb-18__chip">0 0 6px core · 0 0 22px glow · 0 0 60px halo</p>
  </div>
</section>
.fb-18 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--fb-18-bg);
  --fb-18-bg: radial-gradient(120% 90% at 50% 110%,oklch(0.24 0.09 320),oklch(0.13 0.03 275) 62%);
  --fb-18-c: oklch(0.72 0.28 330);
  --fb-18-ink: oklch(0.97 0.02 320);
  --fb-18-mut: oklch(0.76 0.04 320);
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  color: var(--fb-18-ink);
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px,5vw,56px);
  overflow: hidden;
}

.fb-18 *,
.fb-18 *::before,
.fb-18 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fb-18__grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,oklch(0.72 0.28 330/.07) 0 1px,transparent 1px 54px),repeating-linear-gradient(0deg,oklch(0.7 0.2 200/.06) 0 1px,transparent 1px 54px);
  mask-image: radial-gradient(90% 70% at 50% 60%,black,transparent);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 60%,black,transparent);
}

.fb-18__stage {
  position: relative;
  width: min(100%,58ch);
  display: grid;
  gap: clamp(18px,3vw,28px);
  justify-items: center;
  text-align: center;
}

.fb-18__eyebrow {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: oklch(0.82 0.16 200);
  text-shadow: 0 0 12px oklch(0.7 0.2 200/.8);
}

.fb-18__title {
  font-size: clamp(30px,6.4vw,62px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 800;
  text-transform: lowercase;
  color: oklch(0.98 0.03 330);
  text-shadow: 0 0 6px oklch(0.95 0.08 330),0 0 22px var(--fb-18-c),0 0 62px color-mix(in oklch,var(--fb-18-c) 60%,transparent);
}

.fb-18__flick {
  animation: fb-18-blink 1.2s steps(1) infinite;
  color: oklch(0.85 0.2 200);
  text-shadow: 0 0 8px oklch(0.85 0.2 200),0 0 26px oklch(0.7 0.2 200);
}

@keyframes fb-18-blink {
  0%,
    49% {
    opacity: 1;
  }

  50%,
    100% {
    opacity: .12;
  }
}

.fb-18__sub {
  max-width: 48ch;
  font-size: clamp(13.5px,1.7vw,16.5px);
  line-height: 1.62;
  color: var(--fb-18-mut);
  text-wrap: pretty;
}

.fb-18__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px,5vw,42px);
  justify-content: center;
}

.fb-18__fab {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border: 2px solid var(--fb-18-c);
  border-radius: 50%;
  cursor: pointer;
  color: oklch(0.98 0.04 330);
  background: oklch(0.16 0.04 320/.7);
  box-shadow: 0 0 6px color-mix(in oklch,white 60%,var(--fb-18-c)),0 0 22px var(--fb-18-c),0 0 60px color-mix(in oklch,var(--fb-18-c) 60%,transparent),inset 0 0 16px color-mix(in oklch,var(--fb-18-c) 40%,transparent);
  animation: fb-18-warm .55s steps(1,end) 1;
  transition: transform .26s cubic-bezier(.2,1.3,.4,1),box-shadow .3s ease,background .3s ease;
}

.fb-18__fab svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 0 5px var(--fb-18-c)) drop-shadow(0 0 14px color-mix(in oklch,var(--fb-18-c) 70%,transparent));
}

@keyframes fb-18-warm {
  0%,
    8% {
    opacity: .2;
  }

  9%,
    14% {
    opacity: 1;
  }

  15%,
    22% {
    opacity: .25;
  }

  23%,
    38% {
    opacity: 1;
  }

  39%,
    44% {
    opacity: .4;
  }

  45%,
    100% {
    opacity: 1;
  }
}

.fb-18__fab:hover {
  transform: translateY(-3px) scale(1.04);
  background: oklch(0.22 0.08 320/.8);
  box-shadow: 0 0 9px color-mix(in oklch,white 70%,var(--fb-18-c)),0 0 34px var(--fb-18-c),0 0 90px color-mix(in oklch,var(--fb-18-c) 70%,transparent),inset 0 0 26px color-mix(in oklch,var(--fb-18-c) 55%,transparent);
}

.fb-18__fab:active {
  transform: scale(.93);
}

.fb-18__fab:focus-visible {
  outline: 3px solid oklch(0.98 0.02 320);
  outline-offset: 6px;
}

.fb-18__fab--cyan {
  --fb-18-c: oklch(0.8 0.19 200);
  color: oklch(0.98 0.03 200);
  animation-delay: .12s;
}

.fb-18__fab--amber {
  --fb-18-c: oklch(0.83 0.18 78);
  color: oklch(0.98 0.04 78);
  animation-delay: .24s;
}

.fb-18__fab--off {
  border-color: color-mix(in oklch,var(--fb-18-c) 40%,oklch(0.3 0.02 78));
  color: oklch(0.62 0.06 78);
  box-shadow: inset 0 0 14px oklch(0 0 0/.5);
  animation: none;
}

.fb-18__fab--off svg {
  filter: none;
}

.fb-18__fab--off:hover {
  border-color: var(--fb-18-c);
  color: oklch(0.98 0.04 78);
  box-shadow: 0 0 9px color-mix(in oklch,white 70%,var(--fb-18-c)),0 0 34px var(--fb-18-c),0 0 90px color-mix(in oklch,var(--fb-18-c) 70%,transparent);
}

.fb-18__fab--off:hover svg {
  filter: drop-shadow(0 0 5px var(--fb-18-c)) drop-shadow(0 0 14px color-mix(in oklch,var(--fb-18-c) 70%,transparent));
}

.fb-18__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--fb-18-mut);
  padding: 8px 14px;
  border: 1px solid oklch(0.72 0.28 330/.35);
  border-radius: 99px;
  box-shadow: 0 0 18px oklch(0.72 0.28 330/.18);
}

@media (prefers-reduced-motion: reduce) {
  .fb-18 * {
    animation: none !important;
    transition: none !important;
  }
}
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 Floating 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: Cyberpunk Neon Glow Floating Button CSS
Source: https://codefronts.com/components/css-floating-buttons/neon-glow-fab/

Neon that looks like a gas tube rather than a coloured box-shadow: a bright near-white core, a saturated mid-glow, and a wide dim halo — three layers with different blur radii, exactly how a real sign photographs. Plus a restrained startup flicker, a scanline sweep, and a hover that ramps the current up instead of just changing colour.
## HTML
```html
<section class="fb-18" aria-label="Cyberpunk neon floating button demo">
  <div class="fb-18__grid" aria-hidden="true"></div>
  <div class="fb-18__stage">
    <p class="fb-18__eyebrow">three-layer falloff · 400ms warm-up</p>
    <h2 class="fb-18__title">Neon<span class="fb-18__flick">_</span>district</h2>
    <p class="fb-18__sub">A hot near-white core, a saturated mid glow and a wide dim halo. Same three layers a real sign shows on camera.</p>
    <div class="fb-18__row">
      <button class="fb-18__fab" type="button" aria-label="Execute command">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 2L4.5 13.5H11l-1 8.5 8.5-11.5H12z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
      </button>
      <button class="fb-18__fab fb-18__fab--cyan" type="button" aria-label="Scan network">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="6.6" fill="none" stroke="currentColor" stroke-width="1.9"/><path d="M15.8 15.8L21 21" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
      </button>
      <button class="fb-18__fab fb-18__fab--amber fb-18__fab--off" type="button" aria-label="Power, unlit until hover">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M6.6 6.8a7.5 7.5 0 1 0 10.8 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
      </button>
    </div>
    <p class="fb-18__chip">0 0 6px core · 0 0 22px glow · 0 0 60px halo</p>
  </div>
</section>
```
## CSS
```css
.fb-18 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--fb-18-bg);
  --fb-18-bg: radial-gradient(120% 90% at 50% 110%,oklch(0.24 0.09 320),oklch(0.13 0.03 275) 62%);
  --fb-18-c: oklch(0.72 0.28 330);
  --fb-18-ink: oklch(0.97 0.02 320);
  --fb-18-mut: oklch(0.76 0.04 320);
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  color: var(--fb-18-ink);
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px,5vw,56px);
  overflow: hidden;
}

.fb-18 *,
.fb-18 *::before,
.fb-18 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fb-18__grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,oklch(0.72 0.28 330/.07) 0 1px,transparent 1px 54px),repeating-linear-gradient(0deg,oklch(0.7 0.2 200/.06) 0 1px,transparent 1px 54px);
  mask-image: radial-gradient(90% 70% at 50% 60%,black,transparent);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 60%,black,transparent);
}

.fb-18__stage {
  position: relative;
  width: min(100%,58ch);
  display: grid;
  gap: clamp(18px,3vw,28px);
  justify-items: center;
  text-align: center;
}

.fb-18__eyebrow {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: oklch(0.82 0.16 200);
  text-shadow: 0 0 12px oklch(0.7 0.2 200/.8);
}

.fb-18__title {
  font-size: clamp(30px,6.4vw,62px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 800;
  text-transform: lowercase;
  color: oklch(0.98 0.03 330);
  text-shadow: 0 0 6px oklch(0.95 0.08 330),0 0 22px var(--fb-18-c),0 0 62px color-mix(in oklch,var(--fb-18-c) 60%,transparent);
}

.fb-18__flick {
  animation: fb-18-blink 1.2s steps(1) infinite;
  color: oklch(0.85 0.2 200);
  text-shadow: 0 0 8px oklch(0.85 0.2 200),0 0 26px oklch(0.7 0.2 200);
}

@keyframes fb-18-blink {
  0%,
    49% {
    opacity: 1;
  }

  50%,
    100% {
    opacity: .12;
  }
}

.fb-18__sub {
  max-width: 48ch;
  font-size: clamp(13.5px,1.7vw,16.5px);
  line-height: 1.62;
  color: var(--fb-18-mut);
  text-wrap: pretty;
}

.fb-18__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px,5vw,42px);
  justify-content: center;
}

.fb-18__fab {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border: 2px solid var(--fb-18-c);
  border-radius: 50%;
  cursor: pointer;
  color: oklch(0.98 0.04 330);
  background: oklch(0.16 0.04 320/.7);
  box-shadow: 0 0 6px color-mix(in oklch,white 60%,var(--fb-18-c)),0 0 22px var(--fb-18-c),0 0 60px color-mix(in oklch,var(--fb-18-c) 60%,transparent),inset 0 0 16px color-mix(in oklch,var(--fb-18-c) 40%,transparent);
  animation: fb-18-warm .55s steps(1,end) 1;
  transition: transform .26s cubic-bezier(.2,1.3,.4,1),box-shadow .3s ease,background .3s ease;
}

.fb-18__fab svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 0 5px var(--fb-18-c)) drop-shadow(0 0 14px color-mix(in oklch,var(--fb-18-c) 70%,transparent));
}

@keyframes fb-18-warm {
  0%,
    8% {
    opacity: .2;
  }

  9%,
    14% {
    opacity: 1;
  }

  15%,
    22% {
    opacity: .25;
  }

  23%,
    38% {
    opacity: 1;
  }

  39%,
    44% {
    opacity: .4;
  }

  45%,
    100% {
    opacity: 1;
  }
}

.fb-18__fab:hover {
  transform: translateY(-3px) scale(1.04);
  background: oklch(0.22 0.08 320/.8);
  box-shadow: 0 0 9px color-mix(in oklch,white 70%,var(--fb-18-c)),0 0 34px var(--fb-18-c),0 0 90px color-mix(in oklch,var(--fb-18-c) 70%,transparent),inset 0 0 26px color-mix(in oklch,var(--fb-18-c) 55%,transparent);
}

.fb-18__fab:active {
  transform: scale(.93);
}

.fb-18__fab:focus-visible {
  outline: 3px solid oklch(0.98 0.02 320);
  outline-offset: 6px;
}

.fb-18__fab--cyan {
  --fb-18-c: oklch(0.8 0.19 200);
  color: oklch(0.98 0.03 200);
  animation-delay: .12s;
}

.fb-18__fab--amber {
  --fb-18-c: oklch(0.83 0.18 78);
  color: oklch(0.98 0.04 78);
  animation-delay: .24s;
}

.fb-18__fab--off {
  border-color: color-mix(in oklch,var(--fb-18-c) 40%,oklch(0.3 0.02 78));
  color: oklch(0.62 0.06 78);
  box-shadow: inset 0 0 14px oklch(0 0 0/.5);
  animation: none;
}

.fb-18__fab--off svg {
  filter: none;
}

.fb-18__fab--off:hover {
  border-color: var(--fb-18-c);
  color: oklch(0.98 0.04 78);
  box-shadow: 0 0 9px color-mix(in oklch,white 70%,var(--fb-18-c)),0 0 34px var(--fb-18-c),0 0 90px color-mix(in oklch,var(--fb-18-c) 70%,transparent);
}

.fb-18__fab--off:hover svg {
  filter: drop-shadow(0 0 5px var(--fb-18-c)) drop-shadow(0 0 14px color-mix(in oklch,var(--fb-18-c) 70%,transparent));
}

.fb-18__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11px;
  color: var(--fb-18-mut);
  padding: 8px 14px;
  border: 1px solid oklch(0.72 0.28 330/.35);
  border-radius: 99px;
  box-shadow: 0 0 18px oklch(0.72 0.28 330/.18);
}

@media (prefers-reduced-motion: reduce) {
  .fb-18 * {
    animation: none !important;
    transition: none !important;
  }
}
```

How this works

Real neon is not one shadow, it is a falloff curve. Stack three:

--c:oklch(0.72 0.28 330);
box-shadow:0 0 6px  color-mix(in oklch, white 60%, var(--c)),  /* hot core   */
           0 0 22px var(--c),                                  /* mid glow   */
           0 0 60px color-mix(in oklch, var(--c) 60%, transparent); /* halo */
text-shadow / filter:drop-shadow follow the same three-stop pattern.

The core must be desaturated toward white. A tube's centre is blown out; keeping all three layers the same saturated hue is why most CSS neon looks like a blurry sticker.

The flicker is deliberately ugly for 400ms and then perfectly stable — three fast opacity dips in the first half second, then nothing. Continuous flicker is a genuine accessibility hazard and reads as broken; a startup stutter reads as a sign warming up.

The dark surface matters as much as the glow. Neon needs a near-black, slightly blue ground (oklch(0.16 0.03 265)) plus a faint grid so the halo has something to fall on. On a mid-grey background the same shadows look like a smudge.

Make it yours

  • Hue: one token drives all three layers. Magenta and cyan are the genre defaults; acid green and amber read as terminal/industrial.
  • Intensity: multiply all three blur radii by the same factor. Keep their ratio near 1 : 3.5 : 10 or the falloff stops looking physical.
  • Off state: drop the core layer entirely and desaturate the tube colour by 70% for an unlit sign that only glows on hover.
  • Chromatic edge: a 1px cyan and 1px magenta drop-shadow offset in opposite directions adds a CRT fringe for free.

Gotchas — read before shipping

  • Flicker animations can trigger photosensitive reactions. Never loop them, and always kill them under prefers-reduced-motion.
  • Large blur radii on box-shadow are expensive to repaint. Animate opacity or transform on a pre-blurred layer rather than animating the blur itself.
  • Saturated glow on a light background lowers text contrast dramatically. Neon is a dark-theme technique — do not port it to a light UI.
  • Never rely on glow alone for focus. Keep a real outline; a brighter glow is invisible to anyone who cannot perceive the hue shift.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

box-shadow, text-shadow, drop-shadow and keyframes are universally supported. The floor here is only oklch()/color-mix() — swap in hex and this runs in any browser.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →