Pure CSS ripple effect (no JavaScript)

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.

More examples

Install using bower

Include stylesheet into your HTML file

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.

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

• Bootswatch Materia theme demo
• Bootswatch Paper (Bootstrap v3) theme demo

Supporters

BrowserStack

Live, Web-Based Browser Testing