• Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Essentials

15 Free CSS Floating action buttons

March 20, 2023
in Essentials

Are you trying to figure out how to make your website more interactive? Give floating action buttons some thought! These buttons are an excellent method to highlight crucial calls to action because they appear to “float” over the page content.

We’ve gathered 15 free CSS floating action buttons in this article for you to use on your website. You are guaranteed to find a design that meets your demands because each one is distinctive and attractive. Let’s explore these imaginative designs right away!

You might also like

13 Free CSS Ripple Effect Buttons

15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience

Custom radio button using CSS only

T-shirt cannon playful animated button concept

Chat bubble smoothly morphs into a “close” X

Clipped Overlapping Grid Items

01
of 15
Floating Action Buttons

Author

  • Valery Alikin

Made with

  • HTML / Less / JS

Created on

  • NOVEMBER 7, 2017

Updated on

  • FEBRUARY 7, 2019

Useful Links

  • More info | Live Demo

Dependency

jquery.js

About the Code

Floating Action Buttons (Tags: float, floating, buttons)


02
of 15
Floating Action Button Expansion

Author

  • Author Name

Made with

  • HTML / CSS

Created on

  • MARCH 29, 2015

Updated on

  • MARCH 29, 2015

Useful Links

  • More info | Live Demo

Dependency

jquery.js

About the Code

Floating Action Button Expansion. Yet another way to display a floating action menu expansion. (Tags: CSS, animation, action)


03
of 15
Pure CSS Floating Action Button

Author

  • Ayush Sindhwani

Made with

  • HTML / CSS / JS

Created on

  • SEPTEMBER 22, 2017

Updated on

  • SEPTEMBER 22, 2017

Useful Links

  • More info | Live Demo

Dependency

jquery.js

About the Code

Pure CSS Floating Action Button


04
of 15
Floating Action Button (FAB)

Author

  • Kowshik Kuri

Made with

  • HTML / CSS / JS

Created on

  • JANUARY 23, 2019

Updated on

  • July 26, 2021

Useful Links

  • More info | Live Demo

Dependency

font-awesome.css, bootstrap.css, jquery.js

About the Code

A floating action button. On click, the menu reveals with slide-up animation. Dependent on jQuery. Bootstrap is used for styling.

Tags

floating action button, fab, button, floating, action


05
of 15
Expanding action button

Author

  • creme

Made with

  • HTML / SCSS / JS

Created on

  • FEBRUARY 2, 2018

Updated on

  • FEBRUARY 19, 2018

Useful Links

  • More info | Live Demo

Dependency

N/A

About the Code

Expanding action button (Tags: button, action, expand, rotate, UI)


06
of 15
Pure CSS Floating menu animation

Author

  • Akhil Sai Ram

Made with

  • HTML / CSS

Created on

  • July 3, 2018

Updated on

  • SEPTEMBER 27, 2018

Useful Links

  • More info | Live Demo

Dependency

N/A

About the Code

Pure CSS Floating menu animation. Just Another Menu(Pure CSS)

Tags

menu, fab, floating action menu, pure-CSS


07
of 15
Material FAB Menu

Author

  • Mamadou Aliou Diallo

Made with

  • HTML / CSS

Created on

  • DECEMBER 8, 2017

Updated on

  • DECEMBER 8, 2017

Useful Links

  • More info | Live Demo

Dependency

N/A

About the Code

Material Floating Action Button (FAB) Menu


08
of 15
Radial Floating Action Button

Author

  • Author Name

Made with

  • HTML / SCSS / JS

Created on

  • FEBRUARY 24, 2015

Updated on

  • FEBRUARY 24, 2015

Useful Links

  • More info | Live Demo

Dependency

bootstrap.css, font-awesome.css, jquery.js

About the Code

Radial Floating Action Button

Tags

fab, google, button, circle, icon


09
of 15
Material Floating Action Button

Author

  • Sergey Pimenov

Made with

  • HTML / Less / JS

Created on

  • July 23, 2016

Updated on

  • July 23, 2016

Useful Links

  • More info | Live Demo

Dependency

font-awesome.css
jquery.js

About the Code

Material Floating Action Button for multi actions.

Tags

material design, fab, floating action button, multiaction


10
of 15
Floating Action Button

Author

  • Vinícius Stutz

Made with

  • HTML / CSS / JS

Created on

  • AUGUST 31, 2016

Updated on

  • OCTOBER 3, 2019

Useful Links

  • More info | Live Demo

Dependency

bootstrap.css
font-awesome.css
jquery.js
bootstrap.js

About the Code

An easy and highly customizable Floating Action Button that shows hidden content on hover. With Bootstrap 3, jQuery, and Font Awesome icons.


11
of 15
Pure CSS Floating Action Button

Author

  • Jones Joseph

Made with

  • HTML / CSS

Created on

  • APRIL 5, 2019

Updated on

  • APRIL 10, 2019

Useful Links

  • More info | Live Demo

Dependency

all.css

About the Code

A simple FAB concept with a wheel with pure CSS

Tags

fab, button, menu, navigation


12
of 15
Floating Action Button

Author

  • João Fernandes

Made with

  • Pug / Sass / Babel

Created on

  • DECEMBER 20, 2016

Updated on

  • APRIL 21, 2018

Useful Links

  • More info | Live Demo

Dependency

N/A

About the Code

Floating Action Button – on-click menu drop up above the button and the button transforms from plus icon to a close icon


13
of 15
FAB – Floating action button

Author

  • Timothy Long

Made with

  • HTML / SCSS / jQuery

Created on

  • JUNE 3, 2015

Updated on

  • OCTOBER 13, 2022

Useful Links

  • More info | Live Demo

Dependency

jquery.js

About the Code

FAB – Floating action button (Tags: fab, floating action button, UI, UX)


14
of 15
Floating Action Button

Author

  • Sasha

Made with

  • HTML / SCSS

Created on

  • JANUARY 30, 2017

Updated on

  • MAY 15, 2020

Useful Links

  • More info | Live Demo

Dependency

N/A

About the Code

Floating Action Button (CSS, UI design, Animation)


15
of 15
Material Share Interaction

Author

  • Bhakti Pasaribu

Made with

  • Pug / SCSS / CoffeeScript

Created on

  • MARCH 6, 2016

Updated on

  • MARCH 31, 2016

Useful Links

  • More info | Live Demo

Dependency

ionicons.css

About the Code

Share interaction concept by using a material floating action button.


FAQs

What are CSS Floating Action Buttons?

CSS Floating Action Buttons are interactive buttons that float above the content on a webpage, providing users with easy access to important calls to action. They are designed to be eye-catching and can help improve user engagement.

Why should I use CSS Floating Action Buttons?

CSS Floating Action Buttons are a great way to draw attention to important calls to action on your website. They are easy to implement and can help improve user engagement and conversions.

How do I add CSS Floating Action Buttons to my website?

Adding CSS Floating Action Buttons to your website is relatively easy. You can either code them yourself using CSS and HTML, or you can use pre-built button designs that you can customize and add to your website.

Can I customize the design of CSS Floating Action Buttons?

Yes, you can customize the design of CSS Floating Action Buttons to fit the style and branding of your website. There are many pre-built designs available online that you can use as a starting point, or you can create your own design using CSS and HTML.

Are there any free CSS Floating Action Buttons available?

Yes, there are many free CSS Floating Action Buttons available online. You can find collections of pre-built button designs that you can use and customize for free, or you can create your own design from scratch using CSS and HTML.

Tags: CSSfloating action buttonsfree collection
Previous Post

13 Free CSS Ripple Effect Buttons

Next Post

30 CSS Text Shadow Effects

Related Stories

Free CSS Ripple Effect Button
Essentials

13 Free CSS Ripple Effect Buttons

March 6, 2023
15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience
Essentials

15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience

February 24, 2023
Pill Styled Radio ButtonsPill Styled Radio Buttons
Essentials

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept
Essentials

T-shirt cannon playful animated button concept

October 13, 2020
chat bubble smoothly morphs into a "close" X
Essentials

Chat bubble smoothly morphs into a “close” X

October 13, 2020
Clipped Overlapping Grid Items
Essentials

Clipped Overlapping Grid Items

September 30, 2020
Next Post
CSS Text Shadow Effects

30 CSS Text Shadow Effects

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In