Buttons

A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s colour theme.

Flat Buttons

Button   Ripple

<a class="btn btn-flat"> ... </a>

<a class="btn btn-flat waves-attach"> ... </a>

Brand Colours

Button   Ripple

Button   Ripple

<a class="btn btn-flat btn-brand"> ... </a>

<a class="btn btn-flat btn-brand waves-attach"> ... </a>

<a class="btn btn-flat btn-brand-accent"> ... </a>

<a class="btn btn-flat btn-brand-accent waves-attach"> ... </a>

Colour Palettes

Raised Buttons

Button   Ripple

<a class="btn"> ... </a>

<a class="btn waves-attach> ... </a>

Brand Colours

Button   Ripple

Button   Ripple

<a class="btn btn-brand"> ... </a>

<a class="btn btn-brand waves-attach waves-light"> ... </a>

<a class="btn btn-brand-accent"> ... </a>

<a class="btn btn-brand-accent waves-attach waves-light"> ... </a>

Colour Palettes