Collection of hand-picked free HTML and CSS floating action button code examples from Codepen and other resources.

Author

  • Aaron Iker

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

Made with

  • HTML / CSS

About a code

Floating Button

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

Responsive: no

Dependencies: -

Author

  • Sasha

Made with

  • HTML / CSS (SCSS)

About a code

Floating Action Button

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

Responsive: yes

Dependencies: -

Author

  • Sean Wu

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

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

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

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è

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

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