Collection of hand-picked free HTML and CSS floating action button code examples from Codepen, GitHub and other resources. Update of February 2022 collection. 2 new items.

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS)

About the code

Add Button Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Vincent Van Goggles

Links

Made with

  • HTML / CSS

About a code

Floating Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Floating Animation

Author

  • Chouaib Blgn

Links

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Floating Animation

Cool floating button animation using HTML and CSS and jQuery.

Author

  • Sasha

Links

Made with

  • HTML / CSS (SCSS)

About a code

Floating Action Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sean Wu

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Materialize FAB Button Spin-Close Menu Variation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: materialize.css, materialize.js

Author

  • BrainUP

Links

Made with

  • HTML / CSS (Less)

About a code

Action Button with Checkbox Trick

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • @BrawadaCom

Links

Made with

  • HTML (Slim) / CSS (Sass)

About a code

Only CSS Action Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Bryce Snyder

Links

Made with

  • HTML / CSS (Less)

About a code

Multi Share Button in Pure CSS

Using Pure CSS to create a multi-functional button out of a single button from checkbox events.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Simone Bernabè

Links

Made with

  • HTML / CSS (SCSS)

About a code

Material Floating Button CSS

Material floating button, like Google Inbox, CSS only. No script needed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tirthak Modi

Links

Made with

  • HTML / CSS

About a code

Floating Button

Using CSS and SVG filters.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css