16 CSS Floating Action Button Designs
Advertisement
A floating action button (FAB) is a fixed-position button that surfaces the most important action on a screen. These 16 hand-coded designs are ready-to-ship FABs for chat windows, compose actions, scroll-to-top, and quick-add controls — copy the markup, wire your handler, and ship.
01 / 16
Classic Plus
Pure CSS 
The benchmark FAB — a solid gradient circle with a + icon that lifts on hover with a deepening shadow. The pattern every Material design system reaches for first.
02 / 16
Speed Dial
Pure CSS 
Hover or focus reveals 3 child actions arcing upward — the classic FAB speed-dial. Keyboard accessible because focus stays within the group via :focus-within.
03 / 16
Pulse Ring
Pure CSS 
A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts. Pure CSS via box-shadow keyframes.
04 / 16
Morphing FAB
Pure CSS 
The circle morphs into a search input on hover — width and border-radius animate together, the icon sliding to the left edge. Premium micro-interaction.
05 / 16
Labeled Pill
Pure CSS 
Pill-shape with icon + text label ("+ New project") — wider than a circle, more discoverable for first-time users. Common pattern in modern dashboards.
06 / 16
Scroll to Top
Pure CSS 
Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance. Keyboard accessible, focus-visible ring, semantic anchor.
07 / 16
Neon Cyber
Pure CSS 
Synthwave neon outline FAB that intensifies on hover — perfect for cyberpunk, gaming, and developer-tool aesthetics. Dark backdrop assumed.
08 / 16
Glass FAB
Pure CSS 
Frosted-glass FAB with backdrop blur — sits beautifully over hero images, gradients, and patterned backgrounds. Border softens on hover.
09 / 16
Brutalist Stamp
Pure CSS 
Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB. Press collapses into the shadow on focus / active for tactile feedback.
10 / 16
Notification Badge
Pure CSS 
FAB with a pulsing red badge showing unread count — pure CSS. The badge uses a separate keyframe so the underlying button stays static.
11 / 16
Loading Spinner
CSS + JS 
Click triggers a loading state — the icon swaps for a spinner, button is disabled, returns to ready after 1.5s. Demonstrates the async-action FAB pattern.
12 / 16
Drag Handle
Pure CSS 
FAB with a 6-dot grip pattern signaling it\u2019s draggable. cursor: grab (and grabbing on :active) makes the affordance unmistakable.
13 / 16
Voice Action
CSS + JS 
Mic FAB that toggles a recording state on click — pulses a red halo while "listening". aria-pressed reflects state for screen readers.
14 / 16
Premium Aurora
Pure CSS 
A soft aurora gradient drifts gently behind the FAB on a 14s loop — the "this is a premium product" floating button. Gentle motion, no chromatic spin.
15 / 16
Quick Reply
Pure CSS 
Click expands into 4 emoji reactions — the messaging-app reaction picker pattern. Uses :focus-within for keyboard accessibility (focus a reaction without it disappearing).
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is a floating action button (FAB)?
A floating action button is a circular or pill-shaped button positioned above the page content (usually pinned to the bottom-right) that surfaces the single most important action on the current screen. The pattern was popularised by Google's Material Design and is now used across Android, iOS, web apps and dashboards.
When should I use a FAB on my site?
Use a FAB when there's exactly one primary action a user is most likely to take — Compose in an email app, New post in a social feed, Add task in a to-do app. Don't use one when there are multiple equally-important actions; an inline button bar is better for those cases.
Can these floating action buttons be used in any framework?
Yes. Every demo is plain HTML + CSS (a few add ~30 lines of vanilla JS for state). Drop the markup into any React, Vue, Svelte, Astro or static HTML page — no dependencies, no build step, MIT licensed.
Are the FAB designs accessible and mobile-friendly?
Yes. Every demo uses a real <button> element with a descriptive aria-label, visible focus states, sufficient colour contrast, and a 44×44px minimum tap target. Continuous animations (pulse, aurora, badge ping) honour the prefers-reduced-motion media query.
Do I need JavaScript to use these floating buttons?
Most don't — 14 of the 16 are pure CSS using :hover, :focus and :checked-driven state machines. Only the Loading Spinner and Voice Action demos include JS, and each ships with a self-contained snippet under 30 lines that you can copy alongside the HTML and CSS.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive