Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mladenplavsic/css-ripple-effect

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
https://github.com/mladenplavsic/css-ripple-effect

no-javascript pure-css ripple

Last synced: 8 days ago
JSON representation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Awesome Lists containing this project

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](https://bootswatch.com/) in their [Materia theme](https://bootswatch.com/materia/#buttons).

Demo
====

![CSS ripple effect example](https://github.com/mladenplavsic/css-ripple-effect/raw/master/docs/images/example-css-ripple-effect.gif "CSS ripple effect example")

* [Demo](https://mladenplavsic.github.io/css-ripple-effect/)
* [Bootswatch Materia theme demo](https://bootswatch.com/materia/#buttons)
* [Bootswatch Paper (Bootstrap v3) theme demo](https://bootswatch.com/3/paper/#buttons)

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
==========

- **BrowserStack**: Live, Web-Based Browser Testing https://browserstack.com