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: about 22 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mladenplavsic/css-ripple-effect
• Owner: mladenplavsic
• License: mit
• Created: 2015-01-10T09:00:47.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2019-04-15T21:29:49.000Z (over 5 years ago)
• Last Synced: 2024-10-11T04:43:14.390Z (3 months ago)
• Topics: no-javascript, pure-css, ripple
• Language: CSS
• Homepage: http://mladenplavsic.github.io/css-ripple-effect
• Size: 1.17 MB
• Stars: 341
• Watchers: 8
• Forks: 110
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-material-design - css-ripple-effect - Pure CSS Ripple, no JS (CSS and JS / Components)
• awesome-css-only - CSS-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation (Uncategorized / Uncategorized)
• awesome-web-effect - css-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation. (🚀 A series of exquisite and compact web page cool effects / Button Effect)
• fucking-awesome-web-effect - css-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation. (🚀 A series of exquisite and compact web page cool effects / Button Effect)

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