Configurable Ripple Effect On Click/Tap - jQuery Waves.js

File Size: 30.8 KB
Views Total: 3326
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Configurable Ripple Effect On Click/Tap - jQuery Waves.js

Waves.js is a tiny jQuery plugin that applies Android (Material Design) inspired, click/tap triggered ripple effect to any DOM elements within the document.

How to use it:

1. Import jQuery and the Waves.js plugin' files into the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Waves.js plugin -->
<link rel="stylesheet" href="/path/to/jquery-waves.css" />
<script src="/path/to/jquery-waves.js"></script>

2. Add the CSS class waves-effect or data-waves attribute to the element where you want to enable the ripple effect. That's it.

<button class="waves-effect">
  Click/Tap Me

<button data-waves>
  Click/Tap Me

3. Customize the ripple color using the waves-color classes or data-waves-background-color attribute:

<button data-waves data-waves-background-color="rgba(0, 0, 0, 0.35)">
  Click/Tap Me

<button class="waves-effect waves-light bg-black">
<button class="waves-effect waves-red">
<button class="waves-effect waves-yellow">
<button class="waves-effect waves-orange">
<button class="waves-effect waves-purple">
<button class="waves-effect waves-green">
<button class="waves-effect waves-teal">

4. Or use a random color:

<button data-waves data-waves-background-color="RANDOM">
  Click/Tap Me

5. Customize the opacity of the ripple effect.

<button data-waves data-waves-background-color="black" data-waves-opacity="0.55">
  Click/Tap Me

6. Customize the duration of the animation in milliseconds. Default: 800.

<button data-waves data-waves-duration="500">
  Click/Tap Me

7. Create MDBootstrap Material style ripple effects.

<div class="box waves-effect waves-material">
  This is a box

8. Apply the ripple effect to an element programmatically.

<div id="rippleElement" data-waves-background-color="random"></div>

// or
var ripples = [];
$('#rippleElement').click(function () {
  var ripple = $(this).ripple(
      50, // x position
      80, // y position

// remove the ripple effect
$('#rippleElement').click(function () {
  $.each(ripples, function (index, ripple) {


v1.3.8 (2020-12-06)

  • fix function name

v1.2.2 (2020-12-01)

  • add .wave-effect alternative


  • bugfix


  • fix on-complete event call

This awesome jQuery plugin is developed by isaeken. For more Advanced Usages, please check the demo page or visit the official website.