Materialize CSS Waves
Materialize CSS waves are an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design.
Applying Materialize CSS Waves
The wave's effect can be applied to any element. To put the effect of the wave on buttons, you just have to put the class waves-effect on to the buttons. If you want the effect of the wave to be white instead, add both waves-effect waves-light as classes.
The following table lists the available classes and their effects.
| Class Name | Description |
|---|---|
| waves-effect | wave effect on the control |
| waves-light | white colored wave effect |
| waves-red | red colored wave effect |
| waves-green | green colored wave effect |
| waves-yellow | yellow colored wave effect |
| waves-orange | orange colored wave effect |
| waves-purple | purple colored wave effect |
| waves-teal | teal colored wave effect |
Source Code
<a class="waves-effect blue waves-light btn" href="#!">Click Here !</a>
Source Code: Output
Circular Wave
To create a circular wave-circle, add .waves-circle to the link element base class. It displays a circular shape and shows waves-effect.
Source Code
<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
Source Code: Output
Web Tutorials
