The floating action button is a button which appears to float above the surface of the user interface of an app and is generally used to promote the most common action within a user interface screen. It is an elegant way of adding extra functionality to the interface and offering users quick access to primary actions.

It can be animated or designed to morph into other items when touched. A floating action button could, for example, rotate when tapped or morph into another element such as a toolbar or panel listing related actions. So in this post we`re going to explore 35 examples of floating action buttons that, hopefully, demonstrate this duplicity of specifications and atypical usage.

Ionic Material Design

Floatton

Login Form

Add Button

Design Menu

Responsive card

Overlay Animation

Angularjs Material floating button directive

Scroll Animation

Fullscreen Search Transition

Playing Cards

Expando

Google Material Design

Papersheet Morphing

Alphabets in CSS

Template cards

Profile

Burger Menu

Leaflet Material Controls

Action buttons

Alarm Material UI

Card – For Blog Post Article

Hangouts app

Multi button pure-CSS

Nav animation

Music Player

Action Button

A button with checkbox trick (NO JS)

Action Button. Only CSS

Pure CSS – Menu App

Pull Down to Refresh (Paper Plane)

Twitter Profile

Simple radial menu

Food Widget

Floatting Draggable Menu (Messenger like)