10 Best Floating Action Button (Popup Menu) Plugins

by jQueryScript,

What Is Floating Action Button

When you're browsing web and mobile apps over the years, you might have noticed that most of them have a Floating Action Button that allows you to directly perform some actions on the screen. 

A floating action button is typically a circular button that sticks to the bottom of the page and pops up a floating interface containing menu links, social buttons, or commonly used actions when clicked/tapped.

The Best Floating Action Button Plugins

In this post, we're going to share you with the 10 best JavaScript and Pure CSS solutions that help developers easily create floating action buttons on the web app to increase user conversions and improve navigation experience. Have fun with it.

Table of contents:

jQuery Floating Action Button Plugins:

Basic Floating Action Button With jQuery And CSS - tiny-fab

A small JavaScript (jQuery) script to create Material Design inspired Floating Action Buttons that floats above the UI to represent the most common actions.

Basic Floating Action Button With jQuery And CSS - tiny-fab

[Demo] [Download]


Material Design Floating Action Button with jQuery - KC FAB

KC FAB is a minimal jQuery plugin to create a Material Design-style circular floating action button that lifts and emits ink reactions on press.

Material Design Floating Action Button with jQuery - KC FAB

[Demo] [Download]


Material Floating Toggle Menu Plugin With jQuery - collapzion.js

collapzion.js is a simple, lightweight jQuery plugin for creating a Material Design inspired floating navigation button on the webpage.

Material Floating Toggle Menu Plugin With jQuery - collapzion.js

[Demo] [Download]


Floating Draggable Popup Menu With jQuery And Animate.js

A Messenger like popup menu concept where you're able to click on the toggle icon to display a horizontal menu bar with a bounce effect based on anime.js.

Floating Draggable Popup Menu With jQuery And Animate.js

[Demo] [Download]


Material-style Floating Button & Panel Plugin For jQuery - st-action-panel

st-action-panel is a lightweight jQuery plugin used to create a Material Design inspired sticky action button that slides out a floating panel when clicked.

Material-style Floating Button & Panel Plugin For jQuery - st-action-panel

[Demo] [Download]


Vanilla JS Floating Action Button Plugins:

Material Inspired Floating Popup Menu

A Material Design inspired floating popup menu which comes with 4 animations and can be placed anywhere on the webpage.

Material Inspired Floating Popup Menu

[Demo] [Download]


Radial Popup Menu With JavaScript And CSS3 – circleMenu

circleMenu is a simple, lightweight, dependency-free JavaScript library that helps you create a radial popup menu with a fullscreen overlay for your web applications.

Radial Popup Menu With JavaScript And CSS3 – circleMenu

[Demo] [Download]


Material Floating Action Button In JavaScript – Bubbler

 A small JavaScript library helps you create a Material Design style floating button which expands a vertical popup menu on hover. No 3rd library and framework required.

Material Floating Action Button In JavaScript – Bubbler

[Demo] [Download]


Pure CSS Floating Action Buttons:

Radial Popup Menu In Pure CSS – Circle Menu

Yet another circle menu navigation concept to create a floating action button that reveals a radial popup menu when toggled.

Radial Popup Menu In Pure CSS – Circle Menu

[Demo] [Download]


Material Design Style Radial FAB Menu With Pure CSS

A Material Design inspired FAB (Floating Action Button ) menu that pops up a group of menu items around the trigger button. Without the need of JavaScript and any 3rd frameworks.

Material Design Style Radial FAB Menu With Pure CSS

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Floating Action Button on the web & mobile? Check out the jQuery Floating Action Button and JavaScript/CSS Floating Action Button sections.

See also: