32 CSS Floating Action Button Designs
A floating action button (FAB) is a fixed-position button that surfaces the most important action on a screen. These 32 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.
Updated · 16 new designs added
·
01 / 32
Material Gradient FAB
Pure CSS NEW 
Material Design floating action button with gradient lift, ripple effect, 4 color variants, and 3 sizes including extended pill shape.
02 / 32
Speed Dial FAB Menu
Pure CSS NEW 
CSS-only speed dial radial FAB menu using checkbox hack with vertical and horizontal expansion variants.
03 / 32
Morph Expand FAB
Pure CSS NEW 
Morphing FAB that expands into an extended pill button on hover, with 4 direction variants and smooth shape transitions.
04 / 32
Scroll-to-Top Progress Ring
CSS + JS NEW 
Scroll-to-top floating button with SVG circular progress ring that tracks scroll depth and fades in via IntersectionObserver.
05 / 32
Floating Chat Widget
CSS + JS NEW 
Floating chat widget FAB for WhatsApp and support chat with animated panel, notification badge, and smooth open/close transitions.
06 / 32
Fan Arc FAB Menu
CSS + JS NEW 
Fan and arc style FAB menu with radial spread using JS angle math, available in two demo layouts.
07 / 32
Squircle FAB
Pure CSS NEW 
Apple-style squircle (superellipse) floating action button with clip-path, size scale variants, and iOS home screen simulation.
08 / 32
Social Share FAB
CSS + JS NEW 
Floating social share button cluster for X, Facebook, LinkedIn, WhatsApp, and copy link with animated reveal.
09 / 32
Glassmorphism FAB
Pure CSS NEW 
Glassmorphism floating action button with backdrop-filter blur, tinted color variants, animated background blobs, and pill shape.
10 / 32
Neon Glow FAB
Pure CSS NEW 
Neon glow floating button for dark cyberpunk UIs with animated border glow, scan-line overlay, and Orbitron display font.
11 / 32
Compose + Tooltip FAB
Pure CSS NEW 
Floating compose button with 3 tooltip styles: left hover tooltip, bottom fade tooltip, and slide-extend label.
12 / 32
Draggable FAB
CSS + JS NEW 
Fully draggable floating action button with corner snapping, touch and mouse support, particle trail effect, and position indicator.
13 / 32
Notification Bell FAB
CSS + JS NEW 
Floating notification bell button with ring animation, multiple badge variants, and an interactive dropdown notification panel.
14 / 32
Floating Cart Badge
CSS + JS NEW 
Floating cart button with live badge counter, add-to-cart product grid, animated badge bump, and collapsible cart mini panel.
15 / 32
Magnetic Hover FAB
CSS + JS NEW 
Magnetic hover floating action button using JS mouse tracking and lerp easing — the button pulls toward the cursor within a radius.
16 / 32
Theme Toggle FAB
CSS + JS NEW 
Floating light/dark mode toggle button with 4 style variants: circle, pill slider, square, and orbit ring — all synced to CSS variables.
17 / 32
Classic Plus
Pure CSS 
The benchmark FAB — a solid gradient circle with a + icon that lifts on hover with a deepening shadow.
18 / 32
Speed Dial
Pure CSS 
Hover or focus reveals 3 child actions arcing upward — the classic FAB speed-dial.
19 / 32
Pulse Ring
Pure CSS 
A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts.
20 / 32
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.
21 / 32
Labeled Pill
Pure CSS 
Pill-shape with icon + text label ("+ New project") — wider than a circle, more discoverable for first-time users.
22 / 32
Scroll to Top
Pure CSS 
Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance.
23 / 32
Neon Cyber
Pure CSS 
Synthwave neon outline FAB that intensifies on hover — perfect for cyberpunk, gaming, and developer-tool aesthetics.
24 / 32
Glass FAB
Pure CSS 
Frosted-glass FAB with backdrop blur — sits beautifully over hero images, gradients, and patterned backgrounds.
25 / 32
Brutalist Stamp
Pure CSS 
Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB.
26 / 32
Notification Badge
Pure CSS 
FAB with a pulsing red badge showing unread count — pure CSS.
27 / 32
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.
28 / 32
Drag Handle
Pure CSS 
FAB with a 6-dot grip pattern signaling it\u2019s draggable.
29 / 32
Voice Action
CSS + JS 
Mic FAB that toggles a recording state on click — pulses a red halo while "listening".
30 / 32
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.
31 / 32
Quick Reply
Pure CSS 
Click expands into 4 emoji reactions — the messaging-app reaction picker pattern.
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 corner) that surfaces the single most important action on the current screen. The pattern was popularised by Google's Material Design in 2014 and is now used across Android, iOS, web apps, and dashboards — Gmail's Compose button, Twitter's New post, Trello's Add card, Slack's New message all use the pattern. The defining characteristics: a single elevated button (shadow lift), persistent positioning (fixed/absolute, always visible), one primary action, optional secondary actions revealed via tap (speed dial / fan arc / morph expand patterns).
When should I use a FAB on my site?
Use a FAB when there's exactly one primary action the user is most likely to take on the current screen — Compose in email, New post in social, Add task in to-do, Add to cart in e-commerce, Start chat in support. Don't use one when there are multiple equally-important actions (an inline button bar is clearer); when the action is secondary or destructive (FABs are visually high-emphasis); or when the screen has its own elevation-heavy components like floating modals (you'll create visual competition). The 32 demos in this collection cover the main use cases: simple primary action (Demo 01 Material Gradient, Demo 17 Classic Plus), action menu (Demo 02 Speed Dial, Demo 06 Fan Arc), specialized actions (Demo 04 Scroll-to-Top, Demo 05 Chat Widget, Demo 13 Notification Bell, Demo 14 Floating Cart, Demo 16 Theme Toggle), and brand-style variants (Demo 09 Glassmorphism, Demo 10 Neon Glow, Demo 25 Brutalist Stamp, Demo 30 Premium Aurora).
Should I build a FAB myself or use Tailwind UI / Material UI?
Tailwind UI's FAB components cost $300+ and ship as React JSX, locking you into React + Tailwind. Material UI (MUI) ships the FAB as part of its ~50kb gzipped component library — fine if you're already on React + MUI, overkill if you just need ONE button. If you're outside the React+Tailwind orbit (Astro, Vue, Svelte, Rails ERB, plain HTML, WordPress) — this collection's 32 FABs drop in as semantic HTML + scoped CSS with zero framework dependencies. The 13 JS-enhanced demos use vanilla JavaScript with no library imports. Aesthetically, the gradient lift on Demo 01 (Material Gradient FAB), the speed dial on Demo 02, and the glassmorphism on Demo 09 match Material UI's production polish without the framework lock-in. MIT-licensed, free, modify-and-resell allowed.
How do I create an expanding FAB menu (speed dial pattern)?
The speed dial pattern (Demo 02 Speed Dial FAB Menu, Demo 06 Fan Arc FAB Menu) reveals 3-5 secondary actions when the user taps the main FAB. The pure-CSS approach: use a hidden
<input type="checkbox"> as the state holder, a <label> styled as the FAB body, and the :checked selector to toggle the visibility/transform of the child action buttons. transform: translateY(0) and opacity: 1 when checked; transform: translateY(20px); opacity: 0; pointer-events: none when unchecked. Add per-button transition-delay values (0ms, 60ms, 120ms, …) for a cascading reveal. No JavaScript needed. The fan arc variant (Demo 06) is the same pattern but uses transform: rotate(angle) translateY(distance) per child so they spread radially instead of stacking vertically — needs ~10 lines of JS to position children dynamically based on the FAB's screen position.How do I make a scroll-to-top FAB with a progress ring?
Demo 04 (Scroll-to-Top Progress Ring) ships the canonical implementation. The FAB has two layered SVG circles: a background circle (the track) and a foreground circle with
stroke-dasharray equal to its circumference. JavaScript reads window.scrollY / (document.body.scrollHeight - window.innerHeight) as a 0-to-1 progress value, then sets strokeDashoffset = circumference * (1 - progress) on the foreground circle — the stroke fills clockwise as the visitor scrolls down. The button only appears after scrolling past 200px (CSS opacity transition + JS classList.toggle). Click handler calls window.scrollTo({ top: 0, behavior: 'smooth' }). Total: ~25 lines of JS. Works in every modern browser; degrades to a hidden button if JS is off.How do I build a draggable / movable FAB that the user can reposition?
Demo 12 (Draggable FAB) ships the production-grade implementation. Three production-grade details most tutorials miss: (1) Use Pointer Events not Mouse Events —
pointerdown/pointermove/pointerup work uniformly across mouse + touch + pen. The Mouse Events API has a separate touch fallback that breaks on hybrid devices. (2) Constrain to viewport bounds — clamp the drag position to [0, window.innerWidth - fabWidth] on each axis, otherwise users drag the FAB off-screen and can't drag it back. (3) Snap to nearest edge on release — like Facebook Messenger Chat Heads, the FAB should snap to the nearest left/right edge of the viewport on pointerup. Use a CSS transition for the snap animation. The Demo 12 implementation also leaves a fading .trail dot animation during the drag for visual feedback. ~60 lines of JS.How do I make a magnetic-hover FAB (cursor attraction effect)?
Demo 15 (Magnetic Hover FAB) ships the cursor-attraction pattern made famous by Awwwards-winning sites and the Stripe Sigma landing page. The mechanic: on
mousemove within a hover-detection radius (typically 100-150px around the button center), JS calculates the offset between the cursor and the button center, then applies transform: translate(cursorOffsetX * strength, cursorOffsetY * strength) on the button — where strength is ~0.3 for a subtle pull. The button "reaches toward" the cursor as it approaches. On mouseleave, smoothly transition back to translate(0, 0) with a cubic-bezier(.22,1,.36,1) easing for the springy return. Two gotchas: (a) skip the effect on touch devices via matchMedia('(hover: none)') — magnetic hover doesn't translate to taps and creates janky pinch-zoom interference. (b) the inner icon should counter-translate at half strength so it stays roughly centered relative to its starting position, otherwise the icon flies off the button. ~30 lines of JS.How do I add a notification badge to a FAB (count indicator)?
Two patterns. Demo 13 (Notification Bell FAB) ships the badge-with-pulse approach — a small absolutely-positioned circle in the top-right corner of the FAB, showing the count (1, 2, 9+) with a continuous CSS pulse animation to draw attention. The bell icon also tilts via
@keyframes ring when a new notification arrives (triggered by JS adding a .ringing class). Demo 14 (Floating Cart Badge) ships the e-commerce pattern — a circular counter showing total cart items, increments with a tiny scale(1) → scale(1.3) → scale(1) bounce when items are added, and the FAB shows a slide-down list of recently added items on hover. Both demos respect prefers-reduced-motion: the pulse/ring/bounce animations freeze for visitors with the OS preference set. The badge text uses semantic HTML with an aria-label="5 new notifications" for screen reader support.Can I build a floating chat widget (Intercom / Crisp / Drift style)?
Demo 05 (Floating Chat Widget) ships the bottom-right chat-launcher pattern that every SaaS marketing site uses (Intercom, Crisp, Drift, Tawk.to all use variations). The FAB shows a chat icon at rest; on click, it expands into a 320×400 chat panel with a header, an empty conversation area, and an input row. The expand animation uses
transform: scale(0) → scale(1) + transform-origin: bottom right so it animates out from the FAB's position rather than dropping in. The icon morphs from chat-bubble to X (close) via two stacked SVGs cross-fading. The demo also includes a setupChat(triggerId, panelId) helper so the same UI can host WhatsApp/Telegram/email channels — pass different IDs, different greetings render. ~60 lines of JS. Easy to wire to a real backend (Pusher, Supabase Realtime, Firebase) by replacing the demo's send-message handler.Are these FABs accessible? What about screen readers and keyboard navigation?
Every demo follows the accessibility checklist: (1) Real
<button> elements — never divs styled as buttons. Browsers handle focus, Enter/Space activation, and screen reader semantics automatically. (2) Descriptive aria-label on every button — "Add new task", "Open chat", "Scroll to top", "Toggle dark mode" — never just "button" or the visible icon character. (3) Visible focus states — every FAB has a :focus-visible ring (typically outline: 2px solid currentColor; outline-offset: 4px). (4) 44×44px minimum tap target — WCAG 2.5.5 Target Size (Enhanced). Even the "mini" size variants (Demo 01) have an invisible larger hit area via padding. (5) Continuous animations honour prefers-reduced-motion — pulse, ring, ripple, magnetic-hover all freeze for visitors with the OS preference set. (6) Semantic state announced — speed dial uses aria-expanded, notification badges use aria-live="polite", the cart counter has aria-label="5 items in cart".Should a FAB be position:fixed or position:absolute?
Use
position: fixed with bottom: 24px; right: 24px for the standard "persistent FAB" pattern that stays in the bottom-right corner regardless of scroll position. Use position: absolute when the FAB belongs to a specific section/card and should scroll with it (rare). The 24px offset is the Material Design specification; iOS Human Interface Guidelines prefers 20px. On mobile, increase to bottom: 80px when the page has a bottom navigation bar so the FAB doesn't overlap. For pages with a footer, watch for FABs overlapping footer content — either auto-hide the FAB when the footer enters the viewport (IntersectionObserver) or use position: sticky; bottom: 24px on a wrapper element inside the main content area so the FAB stops at the footer boundary.Which floating action button design should I use for my project?
Quick decision guide. Generic primary action (Compose, Add, New): Demo 01 (Material Gradient FAB) for SaaS; Demo 17 (Classic Plus) for minimal. Multiple secondary actions revealed by tap: Demo 02 (Speed Dial) for vertical stack; Demo 06 (Fan Arc) for radial spread. Scroll-to-top with progress: Demo 04 (Scroll-to-Top Progress Ring) — universal pattern. SaaS support / live chat: Demo 05 (Floating Chat Widget) — Intercom-style. Social sharing: Demo 08 (Social Share FAB) — slide-out network icons. Dark-mode / premium brand: Demo 09 (Glassmorphism FAB) for frosted; Demo 10 (Neon Glow FAB) for cyberpunk; Demo 30 (Premium Aurora) for editorial. Mobile app brutalism: Demo 25 (Brutalist Stamp) — black-on-yellow with hard shadow. Repositionable: Demo 12 (Draggable FAB) — Messenger-style chat heads. Notification awareness: Demo 13 (Notification Bell) — with badge pulse; Demo 26 (Notification Badge) — simpler variant. E-commerce: Demo 14 (Floating Cart Badge) — item counter + slide list. Awwwards-style interactive: Demo 15 (Magnetic Hover) — cursor-attraction effect. Theme switcher: Demo 16 (Theme Toggle) — sun/moon with smooth transition. All 32 demos respect prefers-reduced-motion, use scoped
.fbNN-* or .cfb-* class names so multiple can coexist, ship semantic HTML with aria-labels, and are MIT-licensed.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
27 CSS Calendar Designs
27
27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.
css calendar css calendar design css calendar widget
Responsive