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 data-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.

Waves colors

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

Styling