Button Colors

Button color, button text color, and border color can be controlled independently the same way as basic elements.

button button button button button

          <a class="btn btn-shadow blue">button</a>
        

button button button button button button button

          <a class="btn white text-red border border-red ">button</a>
        

Square buttons

button button button

          <a class="btn-small-square blue">button</a>
          <a class="btn-square blue ">button</a>
          <a class="btn-large-square blue btn-shadow">button</a>
        

White buttons

Black buttons

        <a class="btn ttu blue">button</a>
        <a class="btn purple text-uppercase letter-spacing-s">button</a>
        <a class="btn-square green ttu letter-spacing-0 ">button</a>
      

Button Sizes

Large

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

Button cloudbutton cloudbutton

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

Small

This button has a smaller height for buttons that need to fit in tight spaces.

Button cloudbutton cloudbutton

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

Multiline

This button has multiline capability for buttons that work like navigation.

Multiline
button cloudMultiline
button cloudMultiline
button

          <a class="waves-effect waves-light btn btn-multiline">Multiline <br> button</a>
          <a class="waves-effect waves-light btn btn-multiline"><i class="material-icons left">cloud</i>Multiline <br> button</a>
          <a class="waves-effect waves-light btn btn-multiline"><i class="material-icons right">cloud</i>Multiline <br> button</a>
        

Button Types

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 cloudbutton cloudbutton

          <a class="waves-effect waves-light btn">Stuff</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>
        

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 Button Button Button Button Button Button

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

Floating

add

          <a class="btn-floating btn btn-large waves-effect waves-light red"><i class="material-icons">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 btn-large red">
              <i class="large material-icons">mode_edit</i>
            </a>
            <ul>
              <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
              <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
              <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
              <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
            </ul>
          </div>
        

You can also open the Fixed Action Button Menu programatically, the below code will make your FAB Menu open:

          $('.fixed-action-btn').openFAB();
        

You can also close them programatically:

          $('.fixed-action-btn').closeFAB();
        

Horizontal FAB

Creating a horizontal FAB is easy! Just add the class horizontal to the FAB.

          <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
            <a class="btn-floating btn btn-large red"><i class="large material-icons">mode_edit</i></a>
            <ul>
              <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
              <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
              <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
              <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
            </ul>
          </div>
        

Click-only FAB

If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the click-to-toggle class to the FAB.

          <div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
             <a class="btn-floating btn btn-large red">
               <i class="large mdi-navigation-menu"> </i>
             </a>
             <ul>
               <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
               <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
               <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
               <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
            </ul>
          </div>
        

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

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

Disabled

This style can be applied to all button types

Button Button Button add

          <a class="btn 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>