Are you trying to figure out how to make your website more interactive? Give floating action buttons some thought! These buttons are an excellent method to highlight crucial calls to action because they appear to “float” over the page content.
We’ve gathered 15 free CSS floating action buttons in this article for you to use on your website. You are guaranteed to find a design that meets your demands because each one is distinctive and attractive. Let’s explore these imaginative designs right away!
Floating Action Buttons
Floating Action Buttons (Tags: float, floating, buttons)
Author: Valery Alikin · Made with: HTML / Less / JS · Created: NOVEMBER 7, 2017 · Updated: FEBRUARY 7, 2019
Floating Action Button Expansion
Floating Action Button Expansion. Yet another way to display a floating action menu expansion. (Tags: CSS, animation, action)
Author: Author Name · Made with: HTML / CSS · Created: MARCH 29, 2015 · Updated: MARCH 29, 2015
Pure CSS Floating Action Button
Pure CSS Floating Action Button
Author: Ayush Sindhwani · Made with: HTML / CSS / JS · Created: SEPTEMBER 22, 2017 · Updated: SEPTEMBER 22, 2017
Floating Action Button (FAB)
A floating action button. On click, the menu reveals with slide-up animation. Dependent on jQuery. Bootstrap is used for styling.
Author: Kowshik Kuri · Made with: HTML / CSS / JS · Created: JANUARY 23, 2019 · Updated: July 26, 2021
Expanding action button
Expanding action button (Tags: button, action, expand, rotate, UI)
Author: creme · Made with: HTML / SCSS / JS · Created: FEBRUARY 2, 2018 · Updated: FEBRUARY 19, 2018
Pure CSS Floating menu animation
Pure CSS Floating menu animation. Just Another Menu(Pure CSS)
Author: Akhil Sai Ram · Made with: HTML / CSS · Created: July 3, 2018 · Updated: SEPTEMBER 27, 2018
Material FAB Menu
Material Floating Action Button (FAB) Menu
Author: Mamadou Aliou Diallo · Made with: HTML / CSS · Created: DECEMBER 8, 2017 · Updated: DECEMBER 8, 2017
Radial Floating Action Button
Radial Floating Action Button
Author: Author Name · Made with: HTML / SCSS / JS · Created: FEBRUARY 24, 2015 · Updated: FEBRUARY 24, 2015
Material Floating Action Button
Material Floating Action Button for multi actions.
Author: Sergey Pimenov · Made with: HTML / Less / JS · Created: July 23, 2016 · Updated: July 23, 2016
Floating Action Button
An easy and highly customizable Floating Action Button that shows hidden content on hover. With Bootstrap 3, jQuery, and Font Awesome icons.
Author: Vinícius Stutz · Made with: HTML / CSS / JS · Created: AUGUST 31, 2016 · Updated: OCTOBER 3, 2019
Pure CSS Floating Action Button
A simple FAB concept with a wheel with pure CSS
Author: Jones Joseph · Made with: HTML / CSS · Created: APRIL 5, 2019 · Updated: APRIL 10, 2019
Floating Action Button
Floating Action Button – on-click menu drop up above the button and the button transforms from plus icon to a close icon
Author: João Fernandes · Made with: Pug / Sass / Babel · Created: DECEMBER 20, 2016 · Updated: APRIL 21, 2018
FAB – Floating action button
FAB – Floating action button (Tags: fab, floating action button, UI, UX)
Author: Timothy Long · Made with: HTML / SCSS / jQuery · Created: JUNE 3, 2015 · Updated: OCTOBER 13, 2022
Floating Action Button
Floating Action Button (CSS, UI design, Animation)
Author: Sasha · Made with: HTML / SCSS · Created: JANUARY 30, 2017 · Updated: MAY 15, 2020
Material Share Interaction
Share interaction concept by using a material floating action button.
Author: Bhakti Pasaribu · Made with: Pug / SCSS / CoffeeScript · Created: MARCH 6, 2016 · Updated: MARCH 31, 2016
