Ripple Effect That Triggers On Click/Tap – Ripple.js

Preview:

Description:

This tiny JavaScript library generates a ripple effect on any button, which will trigger at which point you click the button.

The ripple effect is a popular effect used on buttons in web apps. When the user clicks on the button, ripples are created that travel outwards across the button. This effect can be seen on some popular websites and OS such as Google & Android.

How to use it:

1. Add the ripple.css and ripple.js to the page.

<link rel="stylesheet" href="ripple.css" />
<script src="ripple.js"></script>

2. Add the effect=”ripple” attribute to the buttons or any other clickable elements. That’s it.

<a href="#" effect="ripple">Link</a>
<button effect="ripple">Button</button>

3. Override the default ripple styles.

[effect=ripple] {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[effect=ripple]:before {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform-origin: center;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    width: calc(var(--d) * 1px);
    height: calc(var(--d) * 1px);
    background: var(--ripple-background, white);
    transform: translate(-50%, -50%) scale(var(--s, 1));
    opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
    transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
}