Material Design ripple effect made in vanilla JavaScript.
- Download
Ripple.jsandmat-ripple.js. - Place both files in the same directory or update the import inside of
mat-ripple.jsif using a separate directory. - Insert a
<script>tag inside your<head>element, using ES6 modules:
<script type="module" src="/path/to/mat-ripple.js"></script>
This effect was specifically made for <button> and <a> elements, but I'm sure you can use them on others as well.
To apply the ripple effect to an element, simply add the ripple attribute:
<button ripple class="myBtn">Click Me</button>
To set the ripple's color, define the following rule in your CSS:
.myBtn > .rippleElem {
background-color: hsl(0 0% 0% / 0.1);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent