Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
The Material Design Lite (MDL) button component is an enhanced version of the standard HTML <button>
element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
1. Add to html head, BEFORE essentials.css: <link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 2. Add .enable-materialdesign class to body: <body class="smoothscroll enable-animation enable-materialdesign"> NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 (.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/) COLOR SCHEME: We use blue as default color scheme. You can create your own material design color: Click to create your material design color Credits: MDL official
<!-- Colored FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> <i class="material-icons">add</i> </button> <!-- Colored FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> <i class="material-icons">add</i> </button>
<!--FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab"> <i class="material-icons">add</i> </button> <!-- FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class="material-icons">add</i> </button> <!-- Disabled FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab" disabled> <i class="material-icons">add</i> </button>
<!-- Raised button --> <button class="mdl-button mdl-js-button mdl-button--raised"> Button </button> <!-- Raised button with ripple --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Button </button> <!-- Raised disabled button --> <button class="mdl-button mdl-js-button mdl-button--raised" disabled> Button </button>
<!-- Colored raised button --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Button </button> <!-- Accent-colored raised button --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> Button </button> <!-- Accent-colored raised button with ripple --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Button </button>
<!-- Flat button --> <button class="mdl-button mdl-js-button"> Button </button> <!-- Flat button with ripple --> <button class="mdl-button mdl-js-button mdl-js-ripple-effect"> Button </button> <!-- Disabled flat button --> <button class="mdl-button mdl-js-button" disabled> Button </button>
<!-- Primary-colored flat button --> <button class="mdl-button mdl-js-button mdl-button--primary"> Button </button> <!-- Accent-colored flat button --> <button class="mdl-button mdl-js-button mdl-button--accent"> Button </button>
<!-- Icon button --> <button class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">mood</i> </button> <!-- Colored icon button --> <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"> <i class="material-icons">mood</i> </button>
<!-- Mini FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"> <i class="material-icons">add</i> </button> <!-- Colored mini FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"> <i class="material-icons">add</i> </button>
<!-- Bootstrap + Material Design -->
<button class="btn btn-primary mdl-js-button mdl-js-ripple-effect">Button</button>
<a class="btn btn-primary mdl-js-button mdl-js-ripple-effect">Button</a>
MDL class | Effect | Remarks |
---|---|---|
mdl-button |
Defines button as an MDL component | Required |
mdl-js-button |
Assigns basic MDL behavior to button | Required |
(none) | Applies flat display effect to button (default) | |
mdl-button--raised |
Applies raised display effect | Mutually exclusive with fab, mini-fab, and icon |
mdl-button--fab |
Applies fab (circular) display effect | Mutually exclusive with raised, mini-fab, and icon |
mdl-button--mini-fab |
Applies mini-fab (small fab circular) display effect | Mutually exclusive with raised, fab, and icon |
mdl-button--icon |
Applies icon (small plain circular) display effect | Mutually exclusive with raised, fab, and mini-fab |
mdl-button--colored |
Applies colored display effect (primary or accent color, depending on the type of button) | Colors are defined in material.min.css |
mdl-button--primary |
Applies primary color display effect | Colors are defined in material.min.css |
mdl-button--accent |
Applies accent color display effect | Colors are defined in material.min.css |
mdl-js-ripple-effect |
Applies ripple click effect | May be used in combination with any other classes |