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


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">

Above code will be rendered as:

<div class="image-container rpl" style="position-relative">
	<img src="path/to/image">
	<div class="rippleJS"></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>

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