search

mladenplavsic / css-ripple-effect

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
http://mladenplavsic.github.io/css-ripple-effect
MIT License
341 stars 110 forks source link
no-javascript pure-css ripple

readme

Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation on click event

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.

Demo

CSS ripple effect example

Installation

This library can be installed via npm 

npm install css-ripple-effect

Or you can use yarn

yarn add css-ripple-effect --production

Or you can use bower

bower install css-ripple-effect

Or you can simply download it in your project, but that way you don't have the option to update if newer versions appear.

Supporters