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

button button button

<a class="waves-effect waves-light btn">Stuff</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
        

Floating




  <a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
        

Flat

Button

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

Submit Button

When you use a button to submit a form, 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="mdi-content-send right"></i>
  </button>
        

Large

This button has a larger height for buttons that need more attention.

Button button button

<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="mdi-file-cloud left"></i>button</a>
<a class="waves-effect waves-light btn-large"><i class="mdi-file-cloud right"></i>button</a>
        

Disabled

This style can be applied to all button types

Button Button Button

<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="mdi-content-add"></i></a>