Buttons

Materialize is a modern responsive CSS framework based on Material Design by Google.

There are main button types described in material design - the elevated button, the filled, text and floating button.

Standard Button

Filled (Standard)

The filled buttons communicates high emphasized actions. This is the Stadard Button Design. You can add the class filled to the button to provide this style. This should be the main Actions on a Page, so be carful. A good rule of thumb is to add just one primary action per page or field of view. 

          Copied!
          content_copy
<a class="btn">Standard Button</a>
<a tabindex="0" class="btn filled">Create</a>
<a tabindex="0" class="btn filled icon-left">
  <i class="material-icons">add</i>Create
</a>
<a tabindex="0" class="btn filled icon-right rounded waves-effect waves-light">
  <i class="material-icons">edit</i>Update
</a>

Tonal

Tonal buttons communicates a medium emphasized action. Just add the class tonal to the button. This can be used more often on a page because this are additional Actions next to the primary actions. 

          Copied!
          content_copy
          

<a tabindex="0" class="btn tonal">Create</a>
<a tabindex="0" class="btn tonal icon-left">
  <i class="material-icons">add</i>Create
</a>
<a tabindex="0" class="btn tonal icon-right waves-effect waves-light">
  <i class="material-icons">add</i>Create
</a>

Outlined

The outlined button communicates a medium emphasized action. Just add the class outlined to the button.

          Copied!
          content_copy
          

<a tabindex="0" class="btn outlined">Create</a>
<a tabindex="0" class="btn outlined icon-left">
  <i class="material-icons">add</i>Create
</a>
<a tabindex="0" class="btn outlined icon-right waves-effect waves-light">
  <i class="material-icons">add</i>Create
</a>

Elevated

The elevated button is a tonal button with a shadow. This button that signify medium emphazied actions and seek to give depth to a mostly flat page. Try to only use shadows when absolutely neccessary, to prevent shadow creep. Also keep in mind that on darker backgrounds the shadows are not really good visible. 

          Copied!
          content_copy
          

<a tabindex="0" class="btn elevated">Create</a>
<a tabindex="0" class="btn elevated">
  <i class="material-icons left">add</i>Create
</a>
<a tabindex="0" class="btn elevated">
  <i class="material-icons right">add</i>Create
</a>        
<a tabindex="0" class="btn elevated rounded">Create</a>
<a tabindex="0" class="btn elevated rounded"><i class="material-icons">add</i>Create</a>

Text

Text buttons are used to reduce excessive layering and communicate low emphasis actions. For example, text buttons are used for actions within a card or modal so there are not too many overlapping shadows. 

          Copied!
          content_copy
          

<a tabindex="0" class="btn text">Create</a>
<button class="btn text icon-left">
  <i class="material-icons">add</i>Create
</button>
<a tabindex="0" class="btn text icon-right waves-effect">
  <i class="material-icons">add</i>Create
</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

Helpers

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

          Copied!
          content_copy
          

<button class="btn icon-right 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="btn-large waves-effect waves-light">Button</a>
<a class="btn-large icon-left waves-effect waves-light">
  <i class="material-icons">cloud</i>button
</a>
<a class="btn-large icon-right waves-effect waves-light ">
  <i class="material-icons">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="btn-small waves-effect waves-light">Button</a>
<a class="btn-small icon-left waves-effect waves-light">
  <i class="material-icons">cloud</i>button
</a>
<a class="btn-small icon-right waves-effect waves-light">
  <i class="material-icons">cloud</i>button
</a>

Disabled

This style can be applied to all button types

          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>