##### Buttons

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

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

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.

button settings_backup_restore button gps_fixed button

    <a class="waves-effect waves-light  btn">button</a>
    <a class="waves-effect waves-light  btn"><i class="material-icons left">settings_backup_restore</i> button</a>
    <a class="waves-effect waves-light  btn"><i class="material-icons right">gps_fixed</i> button</a>

#### Flat Button

Button comment Button email Button Dropdownarrow_drop_down

#### Floating Button

add clear

Raised

content_copy content_cut

Default

- one
- two
- three

vertical_align_bottom

- .zip
- .tar
- .exe

cloud_download

Dropdown

#### 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</button>
    <button class="btn waves-effect waves-light " type="submit" name="action">Reply
      <i class="material-icons left">reply</i>
    </button>
    <button class="btn waves-effect waves-light " type="submit" name="action">Send
      <i class="material-icons right">send</i>
    </button>

#### Larger Button

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

Button desktop_mac button cast button

#### Fixed Action Button

If you want a fixed floating action button, you can add multiple actions that will appear on hover. You can see the fixed action button on this page bottom right side corner..

    <div class="fixed-action-btn">
      <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>

add

- help_outline
- widgets
- today
- mail_outline

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.

add

- insert_chart
- format_quote
- publish
- attach_file

    <div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 19px;">
      <a class="btn-floating btn-large red">
        <i class="mdi-social-notifications-none"></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>

#### FAB to Toolbar

Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the toolbar class to the FAB.

      <div class="fixed-action-btn toolbar">
        <a class="btn-floating btn-large red">
          <i class="large material-icons">mode_edit</i>
        </a>
        <ul>
          <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
          <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
          <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
          <li class="waves-effect waves-light"><a href="#!"><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.

menu

- insert_chart
- format_quote
- publish
- attach_file

    <div class="fixed-action-btn horizontal click-to-toggle" style="position: absolute; right: 19px;">
        <a class="btn-floating btn-large red">
          <i class="mdi-navigation-menu"></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>

#### Disabled Button

This style can be applied to all button types.

Button Button add 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="material-icons">add</i></a>

#### Button Colors

###### Material Colors

button

button

button

button

button

clear

clear

clear

clear

clear

button

button

button

button

button

clear

clear

clear

clear

clear

Note: Please refer css-color.html file for all colors classes & more details.