Pure CSS ripple effect (no JavaScript)
CSS-only implementation of Android Material design "ripple" animation
Main advantage of this solution is that there is no DOM manipulation in order to create animation. That means this is faster - it doesn't use JavaScript or jQuery to animate.
This solution is also implemented in one of the biggest Bootstrap theming libraries Bootswatch in their Materia theme.
Add to your project
Install
Use any of the methods below
npm install css-ripple-effect
yarn add css-ripple-effect --production
bower install css-ripple-effect
Or simply include stylesheet into your HTML file
<link rel="stylesheet" href="bower_components/css-ripple-effect/dist/ripple.min.css">
Add CSS class
To enable this feature just include CSS file and put "ripple" class on HTML element. The only problem is that it doesn't follow mouse location because it is not possible via CSS, so it always starts somewhere at the center of the element.
<a class="ripple">Link</a>
Examples
Default Primary Success Info Warning Danger Link
Default Primary Success Info Warning Danger Link
Large button Default button Small button Mini button
Examples on Bootswatch website
Supporters
BrowserStack
Live, Web-Based Browser Testing
