16+ CSS Floating Action Buttons

Are you looking for unique and stylish floating action buttons? Stop; no need to look elsewhere. In this collection, we are demonstrating 16+ HTML and CSS floating action button code examples that instantly draw the user’s attention.

We’ve gathered these float button examples from authentic platforms like Codepen, GitHub, and various other sources, perfect for web designers and web developers. In the ever-evolving realm of web design, floating buttons play a major role in initiating actions like “Add,” “Chat,” and “Share.”.

We have a wide array of free floating buttons that give you never-ending customisation options to improve the website’s interactivity. From simple floating buttons to interactive, animated buttons, these modern FAB examples will enhance usability and design aesthetics on any site. Whether you’re looking to add these items to a portfolio site, a blog website, or an eCommerce site, these floating buttons ensure focus, clarity, minimalism, user engagement, and responsiveness.

Find out an inspiring collection of hand-picked CSS Floating Action Buttons and make your web project stand out.

1. Action Button with Checkbox Trick (NO JS)

See the Pen <a href="https://codepen.io/jpag82/pen/xOmomX"> action button with checkbox trick (NO JS)</a> by BrainUP (<a href="https://codepen.io/jpag82">@jpag82</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: BrainUP
Source: Code / Demo
Created on: AUGUST 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

2. Action Button (Only CSS)

See the Pen <a href="https://codepen.io/Anna_Batura/pen/KMGLwr"> Action Button. Only CSS</a> by @BrawadaCom (<a href="https://codepen.io/Anna_Batura">@Anna_Batura</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anna_Batura
Source: Code / Demo
Created on: AUGUST 06, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(Sass)

3. Multi Share Button in Pure CSS

See the Pen <a href="https://codepen.io/brycesnyder/pen/dXozeV"> Multi Share Button in Pure CSS</a> by Bryce Snyder (<a href="https://codepen.io/brycesnyder">@brycesnyder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bryce Snyder
Source: Code / Demo
Created on: JUNE 04, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

4. Material Share Interaction

See the Pen <a href="https://codepen.io/pasaribu/pen/vGLNov"> Material Share Interaction</a> by Bhakti Pasaribu (<a href="https://codepen.io/pasaribu">@pasaribu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bhakti Pasaribu
Source: Code / Demo
Created on: MARCH 07, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(CoffeeScript)

5. Materialize FAB Button Spin-Close Menu Variation

See the Pen <a href="https://codepen.io/deseanwu/pen/gwNjve"> Materialize FAB button spin-close menu variation</a> by Sean Wu (<a href="https://codepen.io/deseanwu">@deseanwu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sean Wu
Source: Code / Demo
Created on: OCTOBER 31, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Add Button

See the Pen <a href="https://codepen.io/knyttneve/pen/rGLxbP"> add button</a> by Mert Cukuren (<a href="https://codepen.io/knyttneve">@knyttneve</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mert Cukuren
Source: Code / Demo
Created on: SEPTEMBER 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

7. Floating Action Button

See the Pen <a href="https://codepen.io/joaofnds/pen/aBMLXj"> Floating Action Button</a> by João Fernandes (<a href="https://codepen.io/joaofnds">@joaofnds</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: João Fernandes
Source: Code / Demo
Created on: DECEMBER 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JavaScript(Babel)

8. Pure CSS Floating Action Button

See the Pen <a href="https://codepen.io/jo_Geek/pen/gyrZWW"> Pure CSS Floating Action Button</a> by Jones Joseph (<a href="https://codepen.io/jo_Geek">@jo_Geek</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jones Joseph
Source: Code / Demo
Created on: APRIL 05, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Pure CSS Floating Button group

See the Pen <a href="https://codepen.io/jhashubhamkr/pen/MWpXMzE"> Pure CSS Floating Button group</a> by Shubham Kr Jha (<a href="https://codepen.io/jhashubhamkr">@jhashubhamkr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shubham Kr Jha
Source: Code / Demo
Created on: JUNE 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. FAB – Floating action button

See the Pen <a href="https://codepen.io/timothylong/pen/yNMpqx"> FAB – Floating action button</a> by Timothy Long (<a href="https://codepen.io/timothylong">@timothylong</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Timothy Long
Source: Code / Demo
Created on: JUNE 3, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

11. Material Floating Button CSS

See the Pen <a href="https://codepen.io/simoberny/pen/pJZJQY"> Material floating button CSS</a> by Simone Bernabè (<a href="https://codepen.io/simoberny">@simoberny</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Simone Bernabè
Source: Code / Demo
Created on: JULY 16, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

12. Floating Animation

See the Pen <a href="https://codepen.io/chouaibblgn45/pen/gxrGOb"> floating animation</a> by Chouaib Belagoun 👋 (<a href="https://codepen.io/chouaibblgn45">@chouaibblgn45</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chouaib Belagoun
Source: Code / Demo
Created on: AUGUST 01, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. FAB – Floating Action Button – CSS with bootstrap

See the Pen <a href="https://codepen.io/fosmont/pen/oNbOQWd"> FAB – Floating Action Button – CSS with bootstrap</a> by florent (<a href="https://codepen.io/fosmont">@fosmont</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: florent
Source: Code / Demo
Created on: JULY 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Floating Action Button

See the Pen <a href="https://codepen.io/sashatran/pen/pRpmWG"> Floating Action Button</a> by Sasha (<a href="https://codepen.io/sashatran">@sashatran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sasha
Source: Code / Demo
Created on: JANUARY 31, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. Floating Button

See the Pen <a href="https://codepen.io/Gogh/pen/XzrNZd"> Floating Button</a> by Vincent Van Goggles (<a href="https://codepen.io/Gogh">@Gogh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vincent Van Goggles
Source: Code / Demo
Created on: OCTOBER 27, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Add Button Hover Animation

See the Pen <a href="https://codepen.io/aaroniker/pen/WaJdNv"> Add button hover animation</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: OCTOBER 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. Floating Action Button with Modal Test

See the Pen <a href="https://codepen.io/moso/pen/OPrrmR"> Floating Action Button with Modal Test</a> by Morten Sørensen (<a href="https://codepen.io/moso">@moso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Morten Sørensen
Source: Code / Demo
Created on: MARCH 22, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript