Customizable Material Ripple Click Animations with jQuery - Rippleria

File Size: 9.94 KB
Views Total: 4423
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Material Ripple Click Animations with jQuery - Rippleria

Rippleria is a super lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations. Works with any DOM elements like buttons, images, divs, etc.

How to use it:

1. Load the stylesheet jquery.rippleria.css in the head section and the JavaScript jquery.rippleria.js after jQuery library but before the closing body tag.

<link rel="stylesheet" href="jquery.rippleria.css">
<script src="//"></script>
<script src="jquery.rippleria.js"></script>

2. Add the data-rippleria attribute to the DOM element where you want to implement the ripple click effect.

<button data-rippleria>Default</button>

3. Customize the ripple click effect using html5 data attributes.

<button data-rippleria 
  Click me

4. The CSS modifiers.

  • .rippleria-dark: dark ripple effect
  • .rippleria-blured: smooth ripple effect

5. You can also apply the ripple click effect to any DOM elements and pass in the options via JavaScript.


  // aniamtion speed
  duration: 750,

  // custom easing effect
  easing: 'linear',

  // custom color
  color: undefined,

  // enable automatically adding .rippleria-dark class to the dark elements
  detectBrightness: true

Change log:


  • v1.3.1

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