Ripple Effect Interactive Demos
Download Back To CSSScript.Com
Add a ripple to any element with data-ripples. Set its color, opacity, and speed with CSS.
01
Live playground
Choose a color and tune the ripple. Press and hold anywhere on the surface.
02
One attribute, any element
Try the effect on a link, a content row, and a button.
Anchor · default white ripple
Jump back to the playgroundArticle row · black ripple
Button · custom CSS color
03
Tune it with CSS
The generated .ripple element can inherit a custom color, opacity, and animation duration.
HTML + CSS
Custom class
<button data-ripples class="demo-citrus">Try ripple</button>
/* Adjust the ripple created inside the element */
[data-ripples].demo-citrus .ripple {
background-color: #c7f36b;
opacity: 0.36;
animation-duration: 0.38s;
}