Minimal Ripple Click & Hover Effect – ripple.js

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;
}

Changelog:

04/14/2024

• v2.0