Ripple

Add Material Design-style feedback ripples to your existing elements.

Usage

Ripple effect can simply be applied to any element by appending rpl class within a parent element.

<div class="image-container rpl">
	<img src="path/to/image">
</div>		

Above code will be rendered as:

<div class="image-container rpl" style="position-relative">
	<img src="path/to/image">
	<div class="rippleJS"></div>
</div>		

Ripple Fill

By adding the fill class to a rippleJS element, the ripple will fill to rounded corners, good for form elements with fixed size. For example:

<div class="optHolder">
	<input type="checkbox" />
	<div class="rippleJS fill"></div>
</div>		

Ripple Color

The default color is a transparent version of the current color (aka, the currentColor keyword). To change this default, add the following style rule:

.rippleJS .ripple {
	background: red;
}		

You could also change it just for some elements:

.yourClassName .rippleJS .ripple {
	background: blue;
}		

Or change the level of opacity:

.moreOpaque .rippleJS .ripple {
	opacity: 0.65;
}		

By default, rippleJS is already applied to the following classes:

• .btn:not(.disabled)
• .btn-action
• .list-group-item-action
• .nav-link
• .page-link