Floating Buttons

Explore the Floating Buttons Documentation to seamlessly integrate and customize interactive buttons on your website.

Info

Overview

Floating Action Buttons is meant to be easily implemented into almost any website or CMS system with some basic knowledge of HTML, CSS and/or server-side scripting. It is a framework for easy installation, customization, and development.

It is not a CMS plugin, module or widget hence it needs to be installed manually. Floating Action Buttons does not contain premade designs, it is a layout/framework for your custom notification design/s for static websites or dynamic (CMS).

The structure

HTML


<div class="flabtn -top-left -medium -translate">
    <input type="checkbox">
    <a href="#" data-role="main">
        <i class="fas fa-hand-point-up" data-action="open"></i>
        <i class="fas fa-times" data-action="close"></i>
    </a>
    <ul class="flabtn-first">
        <li><a href="#" tooltip="Home"><i class="fas fa-home"></i></a></li>
        <li><a href="#" tooltip="Blog"><i class="fas fa-newspaper"></i></a></li>
        <li><a href="#" tooltip="Products"><i class="fas fa-mobile-alt"></i></a></li>
        <li><a href="#" tooltip="Reviews"><i class="fas fa-comment"></i></a></li>
        <li><a href="#" tooltip="Portfolio"><i class="fas fa-briefcase"></i></a></li>
        <li><a href="#" tooltip="Gallery"><i class="fas fa-images"></i></a></li>
        <li><a href="#" tooltip="About Us"><i class="fas fa-info"></i></a></li>
    </ul>
    <ul class="flabtn-second">
        <li><a href="#" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#" tooltip="Instagram"><i class="fab fa-instagram"></i></a></li>
        <li><a href="#" tooltip="Twitter"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#" tooltip="Contact"><i class="fas fa-envelope"></i></a></li>
    </ul>
</div>

CSS

This menu contains two CSS files:
  • main.css - demo page styles
  • flabtn.css - required menu styles
The file "flabtn.css" contains all of the specific styling. The file is separated into sections:
  • Reset
  • Basic style
  • Shape
  • Size
  • Position
  • Colors
  • Animations
If you want to edit a specific section, simply find the appropriate label in the CSS file.

Quick install

  1. Include necessary CSS
  2. Copy the HTML code of the menu from one of the demo files.
  3. Replace demo menu elements with yours.
<link rel="stylesheet" href="css/flabtn.css">

Options

Animation Effects

There are 7 animation effects that you can use. All you need is to add the appropriate class to menu container. For example, if you want the "Rotate" effect, class name should be: "-rotate". You can find all available effects and classes in table below.
Effect Class name
Fade -
Rotate -rotate
Scale -scale
Rotate and Scale -rotate-scale
Translate -translate
Translate Rotate -rotate-translate
Rotate Translate Scale -rotate-translate-scale
Translate Scale -translate-scale

Position

There are 8 defined menu positions. To use one of them you need to add appropriate class to menu container. For example, if you want the "Top-left" position, class name should be: "-top-left". You can find all available positions and classes in table below.
Position Class name
Top-left -top-left
Top-center -top-center
Top-right -top-right
Bottom-left -bottom-left
Bottom-center -bottom-center
Bottom-right -bottom-right
Left -left
Right -right

Shape

There are 4 possible shapes of the buttons. To use one of them you need to add appropriate class to menu container. For example, if you want the "Rounded square" shape, class name should be: "-rsquare". You can find all available shapes and classes in table below.
Shape Class name
Circle -circle
Ellipse -ellipse
Square -square
Rounded square -rsquare

Size

There are 3 possible sizes of the buttons. To use one of them you need to add the appropriate class to the menu container. For example, if you want the "small" size, class name should be: "-small". You can find all available sizes and classes in the table below.
Size Class name
Size -small
Medium -medium
Large -large

Tooltips

You can use the tooltips for link. To use tooltip add attribute tooltip in link. For example, add tooltip 'Home': 
<a href="#" tooltip="Home"><i class="fas fa-home"></i></a>
If you want to show tooltip forever, add attribute 'data-tooltip="show"' to link. For example: 
<a href="#" tooltip="Home" data-tooltip="show"><i class="fas fa-home"></i></a>

Main button

If you want to set different icons for the open and close buttons, use the attribute 'data-action'.
  • data-action="open" - for open icon
  • data-action="close" - for close icon
For example: 
<i class="fas fa-hand-point-up" data-action="open"></i>
<i class="fas fa-times" data-action="close"></i>

Colors

There are 12 defined color combinations. To use one of them you need to add appropriate value for attribute 'data-color' to <a> tag. For example, if you want the orange background color and white color for the icon, the attribute should be: "ORANGE-white". When you hover on the icon the background change on white color and icon color change on orange. You can find all the available colors and attribute value in the table below.
Background color value Icon color value
WHITE white
GREY grey
BLACK black
RED red
ORANGE orange
YELLOW yellow
LIME lime
GREEN green
CYAN cyan
BLUE blue
PURPLE purple
PINK pink

Sources and Credit

I've used the following images, icons or other files as listed.

Tricks and tips

Debug

If you're stuck with your layout and have issues you can't fix immediately, I recommend you first try to debug the site with firebug or native browser element inspector (eg. right-click --> Inspect element). This will also help you build your custom layout faster and understand the scheme of how things work in Float Button Menu.

Use minified version

From the performance point, it is good practice to use minified CSS and JS versions of the Floating Action Buttons CSS.

Release Notes

= 1.0 =
  • Initail Release