Material Design Lite Buttons - Material Design Lite

What are Material Design Lite Buttons?

The MDL offers different types of CSS classes to the predefined visual and behavioral enhancements to the buttons. Following table explains the available classes and their effects.
S.N.
Class Name & Description
1
mdl-button
Sets button as an MDL component, required.
2
mdl-js-button
Adds basic MDL behavior to button, required.
3
(none)
Sets flat display effect to button, default.
4
mdl-button--raised
Sets raised display effect, can be used mutual exclusively with fab, mini-fab, and icon.
5
mdl-button--fab
Sets fab (circular) display effect, can be used mutual exclusively with raised, mini-fab, and icon.
6
mdl-button--mini-fab
Sets mini-fab (small fab circular) display effect,can be used mutual exclusively with raised, fab, and icon.
7
mdl-button--icon
Sets icon (small plain circular) display effect, can be used mutual exclusively with raised, fab, and mini-fab.
8
mdl-button--colored
Sets colored display effect where the colors are defined in material.min.css.
9
mdl-button--primary
Sets primary color display effect where the colors are defined in material.min.css.
10
mdl-button--accent
Sets accent color display effect where the colors are defined in material.min.css.
11
mdl-js-ripple-effect
Sets ripple click effect, can be used in combination with any other classes.

Example

Below mentioned example describes the use of mdl-button classes which shows various types of buttons.
mdl_buttons.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics