Buttons

Straightforward markup

A no thrills button: <button class="button">some text</button>

What you also get for free is the Material Design "Ripple". As part of the Google's Material Design spec. If you don't want the "Ripple" add no-ripple to the button markup as an attribute. e.g.

<button class="button" no-ripple>ripple-less button</button>

You can also apply any of the other classes available in Ionic by default: http://ionicframework.com/docs/components/#buttons

What are those 2 classes added to the button automatically?

The button directive automatically adds 2 classes to the button element for you, this means you don't have to manually add or trigger the "Ripple" effect. As per Google's Material Design Specification the "Ripple" is available by default, so having to add this yourself seems really mean..

So we add these 2 classes mdl-js-button mdl-js-ripple-effect to your button element for you.

But what do they do?

mdl-js-button tells Material Design Lite you want to include your button as a Material component, which means it gets registered automatically with MDLs Component Handler. This adds all the nice Material goodness.

mdl-js-ripple-effect enables the "Ripple" component registered with MDLs Component Handler. This adds additional CSS classes and creates a couple wrapping elements to contain the actual effect.