Materialize CSS Buttons, Working with Buttons in Materialize CSS

Materialize CSS Tutorial

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 :

Materialize CSS Tutorial