16 CSS Floating Action Button Designs

components css-only interactive

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.

16 unique FABs 14 Pure CSS 2 CSS + JS 100% copy-paste ready Published May 4, 2026

01 / 16

Classic Plus

Pure CSS

The benchmark FAB — a solid gradient circle with a + icon that lifts on hover with a deepening shadow.

Live Demo Try it

02 / 16

Speed Dial

Pure CSS

Hover or focus reveals 3 child actions arcing upward — the classic FAB speed-dial.

Live Demo Try it

03 / 16

Pulse Ring

Pure CSS

A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts.

Live Demo Try it

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.

Live Demo Try it

05 / 16

Labeled Pill

Pure CSS

Pill-shape with icon + text label ("+ New project") — wider than a circle, more discoverable for first-time users.

Live Demo Try it

06 / 16

Scroll to Top

Pure CSS

Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance.

Live Demo Try it

07 / 16

Neon Cyber

Pure CSS

Synthwave neon outline FAB that intensifies on hover — perfect for cyberpunk, gaming, and developer-tool aesthetics.

Live Demo Try it

08 / 16

Glass FAB

Pure CSS

Frosted-glass FAB with backdrop blur — sits beautifully over hero images, gradients, and patterned backgrounds.

Live Demo Try it

09 / 16

Brutalist Stamp

Pure CSS

Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB.

Live Demo Try it

10 / 16

Notification Badge

Pure CSS

FAB with a pulsing red badge showing unread count — pure CSS.

Live Demo Try it

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.

Live Demo Try it

12 / 16

Drag Handle

Pure CSS

FAB with a 6-dot grip pattern signaling it\u2019s draggable.

Live Demo Try it

13 / 16

Voice Action

CSS + JS

Mic FAB that toggles a recording state on click — pulses a red halo while "listening".

Live Demo Try it

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.

Live Demo Try it

15 / 16

Quick Reply

Pure CSS

Click expands into 4 emoji reactions — the messaging-app reaction picker pattern.

Live Demo Try it

16 / 16

Square Modern

Pure CSS

Squircle (rounded square) FAB with subtle hover tilt — the 2025 design trend that breaks from the always-circular FAB.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Box Shadow Generator

FAB elevation — that's the whole point.

Generator

CSS Cursor Generator

Change cursor on hover for clarity.

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 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 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 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