There are 3 main button types described in material design - the raised button, the floating, and the flat button button.

Raised

The raised button is a standard button that signify actions and seek to give depth to a mostly flat page.

button cloudbutton cloudbutton

          Copied!
          content_copy
          
<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
          
        

Floating

add

          Copied!
          content_copy
          
  <a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">add</i></a>

          
        

Floating Action Button

A circular material button that lifts and displays an ink reaction on press. See the documentation on this page

Flat

Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.

Button

          Copied!
          content_copy
          
  <a class="waves-effect 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

Submitsend

          Copied!
          content_copy
          
  <button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
          
        

Large

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

Button cloudbutton cloudbutton

          Copied!
          content_copy
          
<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>
          
        

Small

When mouse and keyboard are the primary input methods, this smaller button is useful for denser UI layouts.

Button cloudbutton cloudbutton

          Copied!
          content_copy
          
<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons right">cloud</i>button</a>
          
        

Disabled

This style can be applied to all button types

Button Button Button add

          Copied!
          content_copy
          
<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>