smachs / jquery-fab-button Goto Github PK

View Code? Open in Web Editor NEW

🎨 Floating action button extracted from materializecss to those who want speed and flexibility without adhering to the complete materializecss framework.

CSS 72.24% HTML 27.76%

jquery-fab-button's Introduction

jQuery FAB Button

A small module for jQuery and Javascript based in MaterializeCSS one day I was looking for some alternative to floating action buttons but with no result and the floating action buttons that I thought were either incomplete or not feasible I remembered that I used MaterializeCSS and I decided to adapt only the floating action button to be used separately from framework.

Resources

Table of Resources

Getting Started

Getting Started

Clone the repository using url

$ git clone https://github.com/smachs/jquery-fab-button

CDN

Copy all dependencies from directory

$ cd /js or /css

Add to your template

<!-- Add in HEAD -- >
<link href="../css/jquery-fab-button.css" rel="stylesheet">
<!-- Add After BODY -- >
<script src="../jss/jquery-fab-button.min.js"></script>

Change to color you want

<li>
    <a id="first-fab" class="btn-floating" data-fabcolor="#YourHEX">
        <i class="material-icons">insert_chart</i>
    </a>
</li>

Add FAB to your template

<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
        <li>
            <a id="first-fab" class="btn-floating" data-fabcolor="#45d1ff">
                <i class="material-icons">insert_chart</i>
            </a>
        </li>
        <li>
            <a id="second-fab" class="btn-floating" data-fabcolor="#7345ff">
                <i class="material-icons">format_quote</i>
            </a>
        </li>
        <li>
            <a id="third-fab" class="btn-floating" data-fabcolor="#0084ff">
                <i class="material-icons">publish</i>
            </a>
        </li>
        <li>
            <a id="fourth-fab" class="btn-floating" data-fabcolor="#ff7345">
                <i class="material-icons">attach_file</i>
            </a>
        </li>
    </ul>
</div>