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="" class="img-fluid" alt="Sample image with waves effect.">
    <a href="#">
        <div class="mask waves-effect waves-light"></div>


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