Ripple Class Demo

plasmatech8/ripple-class

Setup

Install the package.

npm install ripple-class

Import the ripple library.

import "ripple-class";

Usage

Add a ripple to a html element by adding the "ripple" class name.

<button class="ripple">Click Me!</button>

Customization

You can use the CSS variables to change the ripple color, duration and scale.

.custom-ripple {
    --ripple-color: rgba(255, 0, 0, 0.8);     /* Default: rgba(255, 255, 255, 0.6) */
    --ripple-duration: 1200ms;                 /* Default: 600ms */
    --ripple-scale: 1;                                /* Default: 4 */
}
<button class="ripple custom-ripple">Click Me!</button>