Welcome to our collection of CSS floating action buttons! In this curated collection, we have gathered a variety of free HTML and CSS floating action button code examples from reputable sources like CodePen, GitHub, and other valuable resources.

With our January 2023 update, we are excited to present two new additions to our collection, ensuring that you have access to the latest and most innovative floating action button designs available. These buttons are designed to provide a convenient and visually appealing way for users to perform important actions on your website or application.

Floating action buttons have become increasingly popular in web design due to their ability to enhance user experience and provide easy access to key functionalities. They are typically circular buttons that "float" above the content, catching the user's attention and offering quick access to essential actions.

Our hand-picked collection showcases a diverse range of floating action buttons, each with its own unique style and functionality. From simple and minimalistic designs to more complex and animated options, you'll find a wide array of choices to suit your project's needs.

Stay ahead of the curve and elevate your website or application's user interface with these captivating and functional buttons. Start exploring our collection now and unlock the potential to enhance user interaction on your website or application.

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: -

Demo image: Floating Animation

Author

  • Chouaib Blgn

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Floating Animation

Cool floating button animation using HTML and CSS and jQuery.

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