Bootstrap waves effect
Just add mdbRippleRadius
to your elements.
Basic example
<!--Button with wave-->
<a class="btn btn-primary btn-lg waves-light" mdbRippleRadius>Click me</a>
<!--Mask with wave-->
<div class="view overlay hm-white-slight waves-light" mdbRippleRadius>
<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"></div>
</a>
</div>
Customization
You can change waves effect color to "lighter", adding waves-light:
<!-- Normal -->
<a class="btn btn-primary btn-lg" mdbRippleRadius>Click me</a>
<!-- Lighter -->
<a class="btn btn-primary btn-lg waves-light" mdbRippleRadius>Click me</a>