Floating Action Buttons (FAB)

Required Javascript for this component is at the end of this page.

FAB

<Code> 
<!-- FAB -->
<button type="button" class="btn btn-fab btn-pink">
    <i class="material-icons">favorite</i>
</button>
<!-- Disabled FAB -->
<button type="button" class="btn btn-fab btn-pink" disabled>
    <i class="material-icons">favorite</i>
</button>

Leaf FAB

<Code> 
<!-- FAB -->
<button type="button" class="btn btn-fab leaf-fab btn-purple">
    <i class="material-icons">favorite_border</i>
</button>
<!-- Disabled FAB -->
<button type="button" class="btn btn-fab leaf-fab btn-purple" disabled>
    <i class="material-icons">favorite_border</i>
</button>

Leaf FAB Inverted

<Code> 
<!-- FAB -->
<button type="button" class="btn btn-fab leaf-fab-inverted btn-purple">
    <i class="material-icons">favorite_border</i>
</button>
<!-- Disabled FAB -->
<button type="button" class="btn btn-fab leaf-fab-inverted btn-purple" disabled>
    <i class="material-icons">favorite_border</i>
</button>

Mini FAB

<Code> 
<!-- Mini FAB -->
<button type="button" class="btn btn-fab mini-fab btn-teal">
    <i class="material-icons">mood</i>
</button>
<!-- Disabled Mini FAB -->
<button type="button" class="btn btn-fab mini-fab btn-teal" disabled>
    <i class="material-icons">mood</i>
</button>

Extended FAB

<Code> 
<!-- Extended FAB -->
<button type="button" class="btn btn-fab extended-fab btn-pink-800">
    <i class="material-icons">search</i> Search
</button>
<!-- Disabled Extended FAB -->
<button type="button" class="btn btn-fab extended-fab btn-pink-800" disabled>
    <i class="material-icons">search</i> Search
</button>

Javascript

<script>
    $(function() {
        // Add ripple to buttons
        $('.btn').ripple();
    });
</script>

If a Button with Ripple is inside a Modal and is already initialized on page load, Redraw it by passing the parameter: 'redraw'.

<script>
    $("#myModal").on('shown.bs.modal', function () {
        // Redraw ripple
        $('.btn').ripple('redraw');
    });
</script>

On this page