Material Floating Buttons

To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github.

git clone https://github.com/nobitagit/polymer-slidenav.git

After referencing the styles in your header drop the MFB markup in your HTML like so:

<ul class="mfb-component--br mfb-slidein" data-mfb-toggle="hover">
  <li class="mfb-component__wrap">
    <a href="#" data-mfb-label="A label" class="mfb-component__button--main">
      <ul class="mfb-component__list">
        <li>
          <a href="#" data-mfb-label="Add" data-mfb-label="label with long long title" class="mfb-component__button--child">
            <i class="mfb-component__child-icon ion-paper-airplane"></i>
          </a>
        </li>
      </ul>
  </li>
</ul>

The two classes of the main <ul> tag define the position of the component and its associated animation. The rest of the code always stays the same regardless of position and animation chosen. Refer to the docs or to the showcase for a thorough explanation.

The best way to integrate MFB in existing projects is to build the styles directly from the source. The scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.

If you use Grunt and have cloned the repo just run grunt build or grunt watch to have automatic compilation.