Apply Click/Tap Ripple Effects To Any DOM Elements - ripple-effect

A minimal and dead simple to use jQuery plugin which implements the Android-style click/tap ripple effect on any DOM elements as defined by Material Design Guidelines.

How it works:

• Detect element click action.
• Get the click position.
• Define ripple position and add the .on-animate class.
• Create the ripple effect using CSS3 transforms

See also:

• More Material Design jQuery Plugins
• Pure JavaScript/CSS Libraries For Material Design
• 100+ Android & Google Material Design Freebies

How to use it:

1. Load the stylesheet ripple-effect.css and JavaScript ripple-effect.js from the dist folder.

<link rel="stylesheet" href="dist/css/ripple-effect.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="dist/js/ripple-effect.min.js"></script>

2. Apply the function rippleEffect on any clickable element and done.

<button type="button">Button</button>
<a href="javascript:void(0)">Link</a>
<div class="demo">DIV element</div>

$(function(){
  $('button, a, .demo').rippleEffect();
});

---

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