Materialize CSS
  Prev Page
Next Page  
Materialize Buttons
Materialize CSS provides different CSS classes to apply various predefined visual and behavioral enhancements to the buttons. There are 3 main button types described in material design. The Raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.
Raised
<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">add_circle_outline</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud_done</i>button</a>
Output :
Floating
<a class="btn-floating btn-large waves-effect waves-light blue"><i class="material-icons">add</i></a>
Output :
Fixed Action Button

If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page.

<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">timeline</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">voice_chat</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">cloud_upload</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
</div>

You can also open and close the Fixed Action Button Menu programatically.

$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();
Output :
Horizontal FAB

Creating a horizontal FAB is easy! Just add the class horizontal to the FAB.

<div class="fixed-action-btn horizontal">
    <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">timeline</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">voice_chat</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">cloud_upload</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
</div>
Output :
Click-only FAB

Instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), Simply add the click-to-toggle class to the FAB.

<div class="fixed-action-btn horizontal click-to-toggle">
    <a class="btn-floating btn-large red">
      <i class="material-icons">menu</i>
    </a>
    <ul>
      <li><a class="btn-floating red"><i class="material-icons">timeline</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">voice_chat</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">cloud_upload</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
</div>
Output :
FAB to Toolbar

Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Add the toolbar class to the FAB.

<div class="fixed-action-btn toolbar">
    <a class="btn-floating btn-large red">
      <i class="material-icons">menu</i>
    </a>
    <ul>      
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">timeline</i></a></li>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">voice_chat</i></a></li>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">cloud_upload</i></a></li>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
    </ul>
</div>
Output :
Flat

The Flat buttons are used to reduce excessive layering.

<a class="waves-effect waves-teal btn-flat">Button</a>
Output :
Submit Button

It Represents an anchor or button to submit a form as a primary button. Instead of using a input tag, use a button tag with a type submit.

<button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
</button>
Output :
Large Buttons

This button has a larger height and width buttons

<a class="waves-effect waves-light btn-large">button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">add_circle_outline</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud_done</i>button</a>
Output :
Disabled Buttons

The disabled buttonns are not clickable buttons. This style can be applied to all button types are following :

<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>
Output :
  Prev Page
Next Page