Pure CSS ripple effect (no JavaScript)

CSS-only implementation of Android Material design "ripple" animation

Star Fork Follow @mladenplavsic

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.

Demo

This solution is also implemented in one of the biggest Bootstrap theming libraries Bootswatch in their Materia theme.

More examples

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

Block level button

Examples on Bootswatch website

Supporters

BrowserStack

Live, Web-Based Browser Testing