16+ CSS Floating Action Buttons

A comprehensive collection of free 16+ HTML and CSS floating action button code examples. 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.

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