Waves (ripple)

Basic waves

Also known as ripple effect, waves are used to add a smooth animation to any element when clicking on it.
Adding waves to an element only require to add the ax-waves attribute to it.
Click on the next examples to see the waves effect :

Waves on images

Waves are working on img and video elements too.
The only difference is functional, the waves element will be append to the body and not inside of the element.

img1

Waves colors

Customize the waves color by specifying it to the ax-waves attribute.
This is useful to match your website design or to get dark waves for light elements.

Styling

CSS Variable Default value Description
--ax-waves-color rgba(255, 255, 255, 0.1) Global default waves color.
Accepts all css color values (rgba, hex, rgb).