Materialize Floating Action Button

Floating Action Button

A floating action button is a circular icon button that will appear after hover.It consists of multiple actions that is associated with the floating action buttons.

Follow the following steps to create Materialzie CSS floating action button.

Step:1 Add the .fixed-action-btn class to the floating action container.

Floating Action Button Container
<div class="fixed-action-btn"></div>
    

Step:2 Create floating action trigger button inside the floating container by using .btn-floating.

Trigger Button

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
</div>
    

Step:3 Create unordered list inside the floating container and assign .btn-floating class to the every linked item i.e <a> element and place it inside unordered list item i.e <li>.

Unordered List

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li>
      <a class="btn-floating red">
        <i class="material-icons">insert_chart</i>
        </a>
    </li>  
  </ul>
</div>
    

Step:4 Now initialize the floating action buttion through Javascript or jQuery.

Initialization

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('.fixed-action-btn').floatingActionButton();
  });
    

Source Code

Download
<div style="position: relative; height: 180px;">
  <div class="fixed-action-btn" style="position: absolute; display: inline-block; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
  <ul id="nav-mobile">
      <li>
        <a class="btn-floating red">
          <i class="material-icons">insert_chart</i>
        </a>
      </li>
      <li>
        <a class="btn-floating yellow darken-1">
          <i class="material-icons">format_quote</i>
        </a>
      </li>
      <li>
        <a class="btn-floating green">
          <i class="material-icons">publish</i>
        </a>
      </li>
      <li>
        <a class="btn-floating blue">
          <i class="material-icons">attach_file</i>
        </a>
      </li>
    </ul>
  </div>
</div>    
Try it yourself

Source Code : Output

Horizontal FAB

To create horizontal fab, only set the direction option to left in the Javascript or jQuery initialization.

Initialization

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'left'
    });
  });
    

Source Code

Download
<div style="position: relative; height: 180px;">
  <div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul id="nav-mobile">
      <li>
        <a class="btn-floating red">
          <i class="material-icons">insert_chart</i>
        </a>
      </li>
      <li>
        <a class="btn-floating yellow darken-1">
          <i class="material-icons">format_quote</i>
        </a>
      </li>
      <li>
        <a class="btn-floating green">
          <i class="material-icons">publish</i>
        </a>
      </li>
      <li>
        <a class="btn-floating blue">
          <i class="material-icons">attach_file</i>
        </a>
      </li>
    </ul>
  </div>
</div>    
Try it yourself

Source Code : Output

Click-only FAB

If you want to open the floating button after click rather than hover then add click-to-toggle class to the FAB.

Initialization
 
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      direction: 'left',
      hoverEnabled: false
    });
  });
    

Source Code

Download
<div style="position: relative; height: 190px;">
  <div class="fixed-action-btn click-to-toggle" style="position: absolute; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="material-icons">menu</i>
    </a>
    <ul id="nav-mobile">
      <li>
        <a class="btn-floating red">
          <i class="material-icons">insert_chart</i>
        </a>
      </li>
      <li>
        <a class="btn-floating yellow darken-1">
          <i class="material-icons">format_quote</i>
        </a>
      </li>
      <li>
        <a class="btn-floating green">
          <i class="material-icons">publish</i>
        </a>
      </li>
      <li>
        <a class="btn-floating blue">
          <i class="material-icons">attach_file</i>
        </a>
      </li>
    </ul>
  </div>
</div>    
Try it yourself

Source Code : Output

FAB to Toolbar

You can transition your FAB into a toolbar on click by using toolbar class to the FAB.

Initialization
   
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      toolbarEnabled: true
    });
  });
  // Or with jQuery
  $('.fixed-action-btn').floatingActionButton({
    toolbarEnabled: true
  });
     

Source Code

Download
<div style="position: relative; height: 180px;">
  <div class="fixed-action-btn toolbar" style="position: absolute; display: inline-block; right: 24px;">   
     <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
      </a>
      <ul>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
        <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
      </ul>    
  </div>
</div>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS