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="btn">Stuff</a>
<a class="btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="btn"><i class="mdi-file-cloud right"></i>button</a>

Floating

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

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" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large mdi-editor-mode-edit"></i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
    <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
    <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
  </ul>
</div>

Flat

.btn-flat
Button
<a class="waves-effect waves-blue 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" type="submit" name="action">
  Submit <i class="mdi-content-send right"></i>
</button>

Different sizes

.btn-extra
Button button button
.btn-large
Button button button
.btn
Button button button
.btn-small
Button button button
<a class="btn btn-extra">Extra</a>
<a class="btn btn-large">Large</a>
<a class="btn">Medium</a>
<a class="btn btn-small">Small</a>
.btn-extra

.btn-large

.btn-floating

.btn-small
<a class="btn-floating btn-extra red"><i class="mdi-content-add"></i></a>
<a class="btn-floating btn-large red"><i class="mdi-content-add"></i></a>
<a class="btn-floating red"><i class="mdi-content-add"></i></a>
<a class="btn-floating btn-small red"><i class="mdi-content-add"></i></a>

Rounded

All buttons except floating can be rounded. Use .btn-rounded classname

Extra Large Medium Small
<a class="btn btn-extra btn-rounded">Extra</a>
<a class="btn btn-large btn-rounded">Large</a>
<a class="btn btn-rounded">Medium</a>
<a class="btn btn-small btn-rounded">Small</a>

Groups

Multiple .btn's can be wrapped in .btn-group



<div class="btn-group">
  <a class="btn btn-extra">Extra</a>
  <a class="btn btn-extra">Extra</a>
  <a class="btn btn-extra">Extra</a>
</div>

<div class="btn-group">
  <a class="btn btn-small btn-rounded">Small</a>
  <a class="btn btn-small">Small</a>
  <a class="btn btn-small btn-rounded">Small</a>
</div>

Disabled

This style can be applied to all button types

Button Button Button
<div class="btn-group">
  <a class="btn btn-extra disabled">Extra</a>
  <a class="btn btn-extra disabled">Extra</a>
</div>
<a class="btn-extra btn-rounded 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>

Color Variations

Full color list you can find in this section.

red pink purple deep-purple indigo blue light-blue cyan teal green light-green lime yellow amber orange deep-orange brown grey blue-grey
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John DoeHi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John DoeAlso, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John DoeHi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John DoeI do not use Facebook. But you can follow me in Twitter.
It's good idea!
John DoeYou can find me here - https://twitter.com/nkdevv