A pure javascript (no polymer, no jQuery) lightweight library that adds a Google Material Design ripple effect to elements.
bower install --save es2015-ripple
Include the script in your HTML
<link href="bower_components/es1025-ripple/ripple.css" rel="stylesheet">
<script src="bower_components/es1025-ripple/ripple.min.js"></script>
Also you can import SASS styles into your own and compile with your configuration.
@import 'bower_components/es1025-ripple/ripple';
- $ripple-effect-color - Effect color, default
#fff
- $ripple-effect-time - Effect timing, default
0.45s
- $ripple-effect-initial-opacity - Effect starting opacity, default
0.4
- $ripple-effect-scale - Effect max ink scale, default
2.5
In your own SASS files you can redeclare any of this variables to change defaults. Use !default
keyword after variable declaration.
Example: $ripple-effect-time: .5s !default;
- This will change default effect time to 500ms.
Then add ripple
class to target element
<button class="ripple">Ripple!</button>
Also you can directly change effect color with data-attribute data-ripple-color
, whitch can use any valid CSS color value.
<button class="ripple" data-ripple-color="red">Ripple!</button>
<button class="ripple" data-ripple-color="#ff00ff">Ripple!</button>