Material Ink Ripple

Responsive interaction encourages deeper exploration of an app by creating timely, logical, and delightful screen reactions to user input. Each interaction is thoughtful, perhaps whimsical, but never distracting. What will happen if I touch this screen? And then this icon?

Radial Action

Add clarity to user input through visual reactions to user input. Radial action is the visual ripple of ink spreading outward from the point of input.

Initializing

To work with ink reactions, you must initialize the jquery.materialRipple.js plugin, by calling the init method.

$(".btn").materialRipple();

Raised Buttons Examples:

HTML Code:

<button type="button" class="btn btn-raised btn-primary">Primary</button>
<button type="button" class="btn btn-raised btn-success">Success</button>
<button type="button" class="btn btn-raised btn-info">Info</button>
<button type="button" class="btn btn-raised btn-danger">Danger</button>

Flat Buttons Examples:

HTML Code:

<button type="button" class="btn btn-flat btn-primary">Primary</button>
<button type="button" class="btn btn-flat btn-success">Success</button>
<button type="button" class="btn btn-flat btn-info">Info</button>
<button type="button" class="btn btn-flat btn-danger">Danger</button>