- ###### FILES

- Two new item submitted Marketing Manager
  17kb
- 52 Doc file Generator FontEnd Developer
  550kb
- 25 Xls File Uploaded Digital Marketing Manager
  20kb
- Anna Strong Web Designer
  37kb

- ###### MEMBERS

- John Doe UI designer
- Michal Clark FontEnd Developer
- Milena Gibson Digital Marketing
- Anna Strong Web Designer

- ###### PAGES

- error_outline No results found.

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

- View
- Html

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

- View
- Html

Button comment Button email Button Dropdownarrow_drop_down

- .zip
- .tar
- .exe

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

#### Floating Button

add clear

Raised

content_copy content_cut

Default

vertical_align_bottom

- .zip
- .tar
- .exe

cloud_download

Dropdown

#### Submit Button

- View
- Html

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

- View
- Html

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

Button desktop_mac button cast button

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

- View
- Html

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

Button cloudbutton cloudbutton

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

- View
- Html

This style can be applied to all button types.

Button Button Button add

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

add

- help_outline
- widgets
- today
- mail_outline

settings
close

##### Theme Customizer

Customize & Preview in Real Time

###### Navbar Options

###### Footer Options

add_shopping_cart