Customizable, semantic Material button implementation.
Shamelessly Openly inspired by Google Inbox, Evernote and Path.
To add Material Floating Buttons to any project just download or clone the repo from Github.
Try it yourself by selecting a style here below, or click on the yellow button here above for a code preview and refer to the docs more info.
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.