Bootstrap waves effect
By default, waves are added to buttons, masks, and navbar's links as in examples below.
<!--Button with wave-->
<a class="btn btn-primary btn-lg">Click me</a>
<!--Mask with wave-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).jpg" class="img-fluid" alt="Sample image with waves effect.">
<a href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
Customization
You can add waves effect to any element in 2 ways:
Via css class:
<!--".waves-effect" class ads a regular wave to the element-->
<a class="btn btn-primary waves-effect">Button with waves</a>
<!--".waves-light" class ads a "lighter" version of the waves-->
<a class="btn btn-primary waves-light">Button with waves</a>
Via JavaScript:
<!--For a regular waves-->
Waves.attach('.btn', ['waves-effect']);
<!--For a lighter version of waves-->
Waves.attach('.btn', ['waves-light']);