Floating Buttons – Documentation

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.

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.

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.

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.

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.

Sources and Credit

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

• Font Awesome by Fonticons, Inc

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