Note: If you wish to access the code snippets in the example files, you have to access them on a local server nor it will show error. Moreover, you can also access the code snippets from Propeller Pro User Manual

Floating Action Button

Floating Action Button is the circular button that floats above the UI and is “used for a promoted action”. It acts as call to action button, meant to represent the single action users perform the most on that particular screen.

The floating action button animates onto the screen as an expanding piece of material, by default. The icon within it may be animated.

Floating Action Button (FAB) Raised Floating Action Button Flat Floating Action Button Floating Action Button with Menu

Floating Action Button (FAB)

Include FAB Button to the code by adding .pmd-btn-fab.

Raised Floating Action Button

Include Raised Floating Action Button to the code by adding .pmd-btn-fab .pmd-btn-raised.

Flat Floating Action Button

Include Flat FAB Button to the code by adding .pmd-btn-fab .pmd-btn-flat.

Outline Floating Action Button

Include Outline FAB Button to the code by adding .pmd-btn-fab with .btn-outline-*.

Floating Action Button Sizes

Add .btn-lg, .btn-sm for additional sizes in Floating Action Buttons.

Large Button

Small Button

The floating action button can transform into sheets of material that are part of the app structure. This dramatic transformation accentuates the action the button enables. Wrap all the links with a div containing classes .menu and .pmd-floating-action and add class .pmd-floating-action-btn to each and every links.