3 Pure CSS4 with JSPublished 2026-10-05Free · no sign-up
Seven floating buttons for the main action on a screen: a classic round FAB, a speed dial with labelled mini actions, an extended button that shrinks as you scroll, a chat launcher with an unread badge, a back-to-top button, actions that fan out in an arc and a FAB docked in a bottom bar.
A round button pinned to the bottom-right corner of a mock app screen with position: absolute; on a real page use position: fixed. It carries one primary action, has an aria-label because the plus icon has no text, and a shadow lifts it above the content.
The main button opens a stack of three smaller labelled actions above it. aria-expanded on the toggle reports the state, the plus rotates into a cross, Escape closes the menu and returns focus to the toggle, and each mini action has a visible text label beside it.
var m = document.querySelector('.fab2 .main'), list = document.getElementById('fab2m');
function set(open) { m.setAttribute('aria-expanded', open); list.hidden = !open; }
m.addEventListener('click', function () { set(m.getAttribute('aria-expanded') !== 'true'); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !list.hidden) { set(false); m.focus(); } });
03. Extended FAB That Shrinks on Scroll
FABScroll
An extended button with an icon and the word Compose, which collapses to just the icon once the list is scrolled and expands again at the top. The label stays in the button as text inside a collapsing span, so its accessible name never changes.
var w = document.querySelector('.fab3'), l = w.querySelector('.list');
l.addEventListener('scroll', function () { w.classList.toggle('small', l.scrollTop > 20); });
04. Chat Launcher with Unread Badge
FABChat
A support chat launcher with a red badge showing two unread messages. The badge is aria-hidden and the count is in the button's accessible name, Open chat, 2 unread messages, so it is not read as a stray number.
A small button that fades in after the content has been scrolled and scrolls back to the top when pressed, smoothly unless reduced motion is requested. It is hidden with visibility as well as opacity, so it cannot be tabbed to while invisible.
View code
<div class="fab5"><div class="pg" tabindex="0" aria-label="Article"><h3>Field notes</h3><p>Scroll this panel to see the button appear.</p><i></i><i></i><i></i><i></i><i></i><i></i></div><button aria-label="Back to top"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div>
var w = document.querySelector('.fab5'), pg = w.querySelector('.pg'), b = w.querySelector('button');
pg.addEventListener('scroll', function () { w.classList.toggle('show', pg.scrollTop > 60); });
b.addEventListener('click', function () { pg.scrollTo({ top: 0, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }); pg.focus(); });
06. Actions That Fan Out in an Arc
FABRadial
Pressing the main button fans three actions out in a quarter circle. Each action's final position is set with a custom property angle and rotate-translate-rotate, so the icons stay upright. The actions are only focusable while open because the list is hidden when closed.
var m = document.querySelector('.fab6 .main'), l = document.getElementById('fab6m');
m.addEventListener('click', function () { var o = m.getAttribute('aria-expanded') !== 'true'; m.setAttribute('aria-expanded', o); l.hidden = !o; });
07. FAB Docked in a Bottom Bar
FABNavigation
A bottom app bar with the action button sitting in a notch in the middle. The notch is a radial-gradient mask cut out of the bar, so the background shows through around the button, and the bar's links are a proper navigation landmark.
A floating action button is for the single most common action on a screen, such as compose, add or chat. Two floating buttons compete with each other; secondary actions belong in a speed dial or the page itself.
Fixed in real pages
These demos use position: absolute inside a mock phone frame. On a real page use position: fixed with right and bottom offsets, plus env(safe-area-inset-bottom) so it clears the iPhone home indicator.
Name the icon
A plus or chat icon has no text, so the button needs an aria-label that says what it does, such as New note or Open chat, 2 unread messages.
Menus that open from a FAB
A speed dial is a disclosure: the main button has aria-expanded and aria-controls, the hidden actions are not focusable while closed, and Escape closes the menu and returns focus to the button.
Frequently asked questions
Will a fixed button cover my content?
It can. Add bottom padding to the page equal to the button's height plus its offset so the last content can scroll clear.
Do FABs belong on desktop?
They come from mobile design. On wide screens a normal button in the header or toolbar is often clearer.
How do I hide it while typing?
Hide it when an input is focused, or use the extended FAB pattern that shrinks on scroll.