16 CSS Floating Action Buttons

Collection of Free hand-picked 16 HTML and CSS Floating Action Buttons.

Author

  • uixcrazy.com

Made with

  • HTML / SCSS / JS

Created on

  • January 03,2017

Updated on

  • January 02,2019

About the Code

CSS – Floating Interaction

Useful Links:Live Demo | Download
Dependency:icono.css
Animation:yes

Author

  • shreyas joshi

Made with

  • HTML / CSS / JS

Created on

  • June 19,2019

Updated on

  • June 23,2019

About the Code

Floating Action Button Menu

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Radu Bratan

Made with

  • HTML / SCSS

Created on

  • June 12,2020

Updated on

  • May 03,2021

About the Code

Floating Action Button with Popup Menu

Useful Links:Live Demo | Download
Dependency:all.css
Animation:yes

Author

  • AmirthaShankari

Made with

  • HTML / SCSS / JS

Created on

  • April 05,2020

Updated on

  • October 02,2020

About the Code

Floating Action button Animation

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes

Author

  • Andrew Mello

Made with

  • HTML / CSS

Created on

  • August 03,2016

Updated on

  • August 03,2016

About the Code

Floating Action Button Expanding Animation

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Mike Wagz

Made with

  • HTML / SCSS / JS

Created on

  • February 09,2017

Updated on

  • May 05,2019

About the Code

floating action button interaction

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Vlad Racoare

Made with

  • HTML / SCSS / JS

Created on

  • November 09,2021

Updated on

  • November 23,2021

About the Code

FAB Morph into Menu with SVGMorph Animation

Floating action button morphing into menu animation using gsap and SVGMorph to animate the icon.

Useful Links:Live Demo | Download
Animation:yes

Author

  • Kowshik Kuri

Made with

  • HTML / CSS / JS

Created on

  • January 23,2019

Updated on

  • July 26,2021

About the Code

Floating Action Button (FAB)

A floating action button. On click, the menu reveals with slide animation. Dependent on jQuery. Bootstrap is used for styling.

Useful Links:Live Demo | Download
Animation:yes

Author

  • Sergey Pimenov

Made with

  • HTML / Less / JS

Created on

  • July 23,2016

Updated on

  • July 23,2016

About the Code

Material Floating Action Button

Material Floating Action Button for multi actions.

Useful Links:Live Demo | Download
Animation:yes

Author

  • Vinícius Stutz

Made with

  • HTML / SCSS / JS

Created on

  • August 31,2016

Updated on

  • October 03,2019

About the Code

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.

Useful Links:Live Demo | Download
Animation:yes

Author

  • Jones Joseph

Made with

  • HTML / CSS

Created on

  • April 05,2019

Updated on

  • April 10,2019

About the Code

Pure CSS Floating Action Button

A simple FAB concept with a wheel with pure CSS.

Useful Links:Live Demo | Download
Dependency:all.css
Animation:yes

Author

  • Timothy Long

Made with

  • HTML / SCSS / JS

Created on

  • June 03,2015

Updated on

  • October 13,2022

About the Code

FAB – Floating action button

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes

Author

  • Sasha

Made with

  • HTML / SCSS

Created on

  • January 30,2017

Updated on

  • May 15,2020

About the Code

Floating Action Button

Useful Links:Live Demo | Download
Dependency:
Animation:yes