Buttons usage

There are a couple of different buttons with each a different purpose.

The raised button is the most common button and is used for example in forms and with <button>. The flat button is used in dialogs (modals) and toolbars. The floating button are mostly used for actions. If you would like to use the default browser button style you don't need to add a class.

Raised button

The raised button can be used on it's own but also with an icon. See the examples below:

Link

		
<button class="raised-button">
  <i class="material-icons left">cloud</i>
  Button example with icon left
</button>

<button class="raised-button">
  <i class="material-icons right">cloud</i>
  Button example with icon right
</button>

<button class="raised-button">Button example without icon</button>

<input type="button" value="Input type button" class="raised-button">

<input type="submit" value="Submit button" class="raised-button">

<input type="reset" value="Reset button" class="raised-button">

<button class="raised-button raised-button-disabled">Disabled</button>

<button class="raised-button raised-button-dense">Dense</button>

<a href="#" class="raised-button">Link</a>

<button class="raised-button hover-ripple ripple">
  Hover ripple
</button>

<button class="raised-button hover-ripple">
  <i class="material-icons left">home</i>
  Hover ripple
</button>
	

Flat button

The flat buttons can also be used with an icon.

Link

		
<button class="flat-button">
  <i class="material-icons left">cloud</i>
  Button example with icon left
</button>

<button class="flat-button">
  <i class="material-icons right">cloud</i>
  Button example with icon right
</button>

<button class="flat-button">Button example without icon</button>

<input type="button" value="Input type button" class="flat-button">

<input type="submit" value="Submit button" class="flat-button">

<input type="reset" value="Reset button" class="flat-button">

<button class="flat-button flat-button-disabled">Disabled</button>

<button class="flat-button flat-button-dense">Dense</button>

<a href="#" class="flat-button">Link</a>
		
	

Floating button

The floating button only exists out of an icon.

cloud
cloud

		
<button class="floating-button">
  <i class="material-icons">cloud</i>
</button>

<button class="floating-button floating-button-mini">
  <i class="material-icons">cloud</i>
</button>

<a href="#" class="floating-button"><i class="material-icons">home</i></a>
		
	

Icon toggles

The icon toggles could be used for favoring an item or give a star rating

Settings

Variable Options Result
$raised-background Variable / color Change color of background
$raised-background-hover Variable / color Change color of background hover
$raised-color Variable / color Change text color
$raised-color-hover Variable / color Change text color hover
$raised-icon-color Variable / color Change color of icon
$raised-disabled-background Variable / color Change disabled background color
$raised-disabled-color Variable / color Change disabled font color
$raised-disabled-background-hover Variable / color Change disabled background hover color
$raised-disabled-color-hover Variable / color Change disabled font hover color
$flat-color Variable / color Change font color
$flat-icon-color Variable / color Changes the icon color
$flat-disabled-color Variable / color Changes the disabled font color
$floating-background Variable / color Change the background color
$floating-icon-color Variable / color Change icon color