Search within TutorialsPark

MDL : Buttons


How to use Material Design Lite Buttons within your Document.


Material Design Lite (MDL) : Buttons

Material Design Lite(MDL) component button is used to create an enhanced button .

The button may contain, text, images to show the purpose of button, or response on user clicks.

Material Design provides mulitple classes to create various types of buttons.Like flat, raised , fab and icon etc.


Material Design Lite (MDL) Buttons : Creating Fab Buttons

A Fab button is created using "mdl-button--fab".

To create a fab button with ripple effect use class "mdl-js-ripple-effect"

To disable the button using the attribute with buttons

Example: Material Design Lite (MDL) Creating Fab Buttons

Give it a TRY! » Note: The class material icons is used to insert MDL material Icons with the Document.


Material Design Lite(MDL) Buttons : Fab Buttons with Colors

To create a MDL button with Fab Effect with colors use class mdl-button--colored along with a Fab Button

Example: Material Design Lite (MDL) Fab Buttons with Colors

Give it a TRY! » Note:The Colors are defined within material.min.css


Material Design Lite(MDL) Buttons : Raised Button

A Raised MDL Button is created using the class mdl-button--raised along , all other effects are applied using usual CSS classes.

Example: Material Design Lite (MDL) Raised Button

Give it a TRY! » Note: A Raised button effect can be applied with fab, mini-fab, and icon as well.


Material Design Lite(MDL) : Raised Buttons with Colors

A Raised button with colors can be created using mdl-button--colored along to apply the colored display effect, the default color is primary defined with material.min.css

Similarly, the accent color is applied using mdl-button-accent class.

Example: Material Design Lite (MDL) Raised Button with Colors

Give it a TRY! » Note:The Value of colors can be altered by setting values in material.min.css


Material Design Lite(MDL) : Flat Buttons

A Flat MDL Button is created by default, no additional CSS class needed, except the button component.

Example: Material Design Lite (MDL) Flat Buttons

Give it a TRY! » Note:Any Button component by default is a flat button.


Material Design Lite(MDL) : Flat Buttons with Colors

A Color to the Flat Button is applied using class mdl-button--primary to apply the primary color.

Similarly, a accent color flat button is created using class mdl-button--accent

Example: Material Design Lite (MDL) Flat Buttons

Give it a TRY! » Note: Color can be set within material.min.css


Material Design Lite(MDL) : Icon Buttons with Colors

To create an Icon Button use class mdl-button--icon to apply a plain circular display effect.

The demo below has a badge within a link, outside the link , badge within a link with no background color.

Example: Material Design Lite (MDL) Flat Buttons

Give it a TRY! » Note:The icon effect is mutually exclusive with other Button Classes


Material Design Lite(MDL) : Small Fab Buttons

A Small MDL button with Fab Effect can be created using class mdl-button--mini-fab

Example: Material Design Lite (MDL) Small Fab Buttons

Give it a TRY! » Note:The icon effect is mutually exclusive with other Button Classes


Material Design Lite : Classes

MDL Class Description
mdl-button To Define a button as an MDL Component.
mdl-js-button To assign a MDL button behaviour.
none To create a flat button, default
mdl-button--raised To create a button with raised effect.
mdl-button--fab To create a standard sized fab button.
mdl-button--mini-fab To create a mini-fab button
mdl-button--icon To apply icon effects on buttons.
mdl-button--colored To apply colored effects , defined within materials.min.css
mdl-button--primary To apply primary color to buttons, defined within materials.min.css
mdl-button--accent To apply accent color to buttons, defined within materials.min.css
mdl-js-ripple-effect To create a ripple effect when clicked.