Raised buttons
Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.
Use raised buttons to give more prominence to actions in layouts with a lot of varying content.
Raised buttons can even help delineate sections of content on a page.
Raised buttons stand out more than flat buttons.
Don’t use flat buttons in UIs where they would be difficult to see.
Flat buttons
Use flat buttons for toolbars and dialogs to avoid excessive layering.
Flat buttons are appropriate in dialogs.
Flat buttons minimize distraction from content.
Correct use of flat buttons.
The raised buttons here are too heavy.
Flat and raised button states
Raised buttons behave like a piece of material resting on another sheet—they lift and fill with color on press.
Flat buttons are printed on material. They do not lift but fill with color on press.
Button text should be all caps in languages that have capitalization. For languages that don’t have capitals, consider using colored text for flat buttons to make them stand out from normal text.
Minimum width: 88dp
Height: 36dp
Hover: 20% #999999
Pressed: 40% #999999
Disabled text: 26% #000000
Minimum width: 88dp
Height: 36dp
Hover: 15% #CCCCCC
Pressed: 25% #CCCCCC
Disabled text: 30% #FFFFFF
Minimum width: 88dp
Height: 36dp
Disabled text: 26% #000000
Disabled button: 12% #000000
Minimum width: 88dp
Height: 36dp
Normal color: 500
Hover color: 600
Pressed color: 700
Disabled text: 30% #FFFFFF
Disabled button: 12% #FFFFFF
Accessibility
To ensure usability for people with disabilities, make sure that buttons have a height of 36dp and touchable targets have a minimum height of 48dp.
Button height: 36dp
Touchable target height: 48dp