Author: | outcomer |
---|---|
Views Total: | 244 views |
Official Page: | Go to website |
Last Update: | December 12, 2022 |
License: | MIT |
Preview:

Description:
ripple.js is a tiny JavaScript library that brings a Material Design-inspired ripple click/hover effect to your web elements. Not only does ripple.js add a visually appealing effect to your elements, but it can also help to reinforce the user’s action and make your site feel more responsive.
How to use it:
1. Using ripple.js is simple. First, include the library in your project.
<link rel="stylesheet" href="ripple.css" /> <script src="ripple.js"></script>
2. Then, use the ripple-hover
or ripple-click
class to attach the effect to your desired elements.
<a class="ripple-click" href="https://www.cssscript.com/"> Back To CSSScript.Com </a>
<div class="ripple-hover"> Hover Me </div>
3. You can customize the color and duration of the ripple to match your design.
.ripple { width: 0; height: 0; border-radius: 50%; transform: scale(0); transition: transform 0.5s, opacity 0.5s; position: absolute; /* Color of ripple circle for hover effect */ background: lime; }