OneTaskBy Tim King · Updated
Floating Action Button Generator
CSS FAB with Speed Dial Menu
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Floating Action Button works
A floating action button, or FAB, is the round button in the corner of an app screen that starts the main task, such as composing or creating. This floating action button generator adds an optional speed dial of extra actions that fan out when it opens, as an icon or with a label.
A FAB works best when a screen has one clear primary action that people need from anywhere on the page. It floats above the content so it is always in reach of the thumb on a phone, without needing a toolbar.
How the floating action button opens
With speed dial actions, the button carries aria-expanded and aria-controls, so screen readers
announce it as a toggle. The CSS reads that attribute to rotate the plus into a cross and reveal the
actions with a short stagger set by a --i custom property on each one. Escape closes the menu and
returns focus to the button, and clicking an action or anywhere else closes it too.
Layout and order
The wrapper is a reversed flex column, so the button comes first in the HTML and the keyboard reaches it before the actions, while the actions still appear above it on screen. The position uses the safe-area insets so it stays clear of the home bar and rounded corners on newer phones.
FAQ
When should I use a floating action button?
Use one when a screen has a single main action that people take often, like writing a message or adding an item. If a page has several equally important actions, or none, a normal button in the layout is clearer than a floating one.
Does an icon-only FAB need a label?
Yes. A plus icon on its own tells a screen reader nothing, so icon-only buttons get an aria-label
from the label field. The extended version shows the text instead, which also helps sighted visitors
who are not sure what the plus means.
How do I make the actions do something?
Each action is a plain button. Add an id or data attribute to each and attach your own click handler, or change them to links if they go to another page. The script already closes the menu after any action is clicked.
Will the FAB cover my content?
It can cover the last lines of a page. Add bottom padding to the page roughly the height of the button plus its offset, about 6rem, so the final content can scroll clear of it. Also keep it away from cookie banners and back to top buttons in the same corner.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Back To Top Button
Build a scroll to top button with an optional reading progress ring.
Bottom Sheet
Build a slide-up bottom sheet with actions and swipe to close.
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.
Popover Builder
Build a native HTML popover that opens next to its button.
Modal Builder
Build an accessible modal window with the native dialog element.