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

Explore a collection of hand-picked free HTML and CSS floating action button code examples from Codepen and other resources to add interactive and stylish floating buttons to your website.

Add Button Hover Animation

Author:
Aaron Iker | October 19, 2018
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Floating Button

Author:
Vincent Van Goggles | October 26, 2017
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Add Button

Add Button

Author:
Mert Nerukuc | September 20, 2017
Made with:
HTMLCSS/SCSSJavaScript

About a code

Inspired by Eddie Lobanovskiy's Plus expanded on Dribbble https://dribbble.com/shots/3208361-Plus-expanded.

Floating Animation

Floating Animation

Author:
Chouaib Blgn | July 31, 2017
Made with:
HTMLCSSJavaScript (jquery.js)

About a code

Cool floating button animation using HTML and CSS and jQuery.

Floating Action Button

Author:
Sasha | January 31, 2017
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Materialize FAB Button Spin-Close Menu Variation

Author:
Sean Wu | October 31, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
materialize.css, materialize.js

Action Button with Checkbox Trick

Author:
BrainUP | August 12, 2016
Made with:
HTML / CSS (Less)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Only CSS Action Button

Author:
@BrawadaCom | August 6, 2016
Made with:
HTML (Slim) / CSS (Sass)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Multi Share Button in Pure CSS

Author:
Bryce Snyder | June 3, 2016
Made with:
HTML / CSS (Less)

About a code

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

Material Floating Button CSS

Author:
Simone Bernabè | July 16, 2015
Made with:
HTML / CSS (SCSS)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Floating Button

Author:
Tirthak Modi | February 14, 2015
Made with:
HTML / CSS

About a code

Using CSS and SVG filters.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨