Playground · 16 demos
CSS Floating Buttons Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Floating Buttons collection for the gallery view with code panels.
01 Pure CSS
Classic Plus
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.
Open
02 Pure CSS
Speed Dial
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.
Open
03 Pure CSS
Pulse Ring
A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts. Pure CSS via box-shadow keyframes.
Open
04 Pure CSS
Morphing FAB
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.
Open
05 Pure CSS
Labeled Pill
Pill-shape with icon + text label ("+ New project") — wider than a circle, more discoverable for first-time users. Common pattern in modern dashboards.
Open
06 Pure CSS
Scroll to Top
Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance. Keyboard accessible, focus-visible ring, semantic anchor.
Open
07 Pure CSS
Neon Cyber
Synthwave neon outline FAB that intensifies on hover — perfect for cyberpunk, gaming, and developer-tool aesthetics. Dark backdrop assumed.
Open
08 Pure CSS
Glass FAB
Frosted-glass FAB with backdrop blur — sits beautifully over hero images, gradients, and patterned backgrounds. Border softens on hover.
Open
09 Pure CSS
Brutalist Stamp
Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB. Press collapses into the shadow on focus / active for tactile feedback.
Open
10 Pure CSS
Notification Badge
FAB with a pulsing red badge showing unread count — pure CSS. The badge uses a separate keyframe so the underlying button stays static.
Open
11 CSS + JS
Loading Spinner
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.
Open
12 Pure CSS
Drag Handle
FAB with a 6-dot grip pattern signaling it\u2019s draggable. cursor: grab (and grabbing on :active) makes the affordance unmistakable.
Open
13 CSS + JS
Voice Action
Mic FAB that toggles a recording state on click — pulses a red halo while "listening". aria-pressed reflects state for screen readers.
Open
14 Pure CSS
Premium Aurora
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.
Open
15 Pure CSS
Quick Reply
Click expands into 4 emoji reactions — the messaging-app reaction picker pattern. Uses :focus-within for keyboard accessibility (focus a reaction without it disappearing).
Open
16 Pure CSS
Square Modern
Squircle (rounded square) FAB with subtle hover tilt — the 2025 design trend that breaks from the always-circular FAB. Apple-inspired.
Open