Bootstrap waves effect

By default, waves are added to buttons, masks, and navbar's links as in examples below.

Click me

<!--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']);