Javatpoint Logo
Javatpoint Logo

Materialize CSS Waves

Materialize CSS waves are used as an external library that is included to create the ink effect outlined in Material Design.

Following is a list of classes and their effects in Materialize CSS:

Index Class name Description
1) waves-effect It is used to apply a wave effect on the control.
2) waves-light It is used to apply a white colored wave effect.
3) waves-red It is used to apply a red colored wave effect.
4) waves-green It is used to apply a green colored wave effect.
5) waves-yellow It is used to apply a yellow colored wave effect.
6) waves-orange It is used to apply an orange colored wave effect.
7) waves-purple It is used to apply a purple colored wave effect.
8) waves-teal It is used to apply a teal colored wave effect.

How to apply Materialize CSS Waves?

You can apply wave effect on any element. If you want to put the wave effect on button put the class waves-effect on to the buttons. If you want the waves-effect to be white instead, add both waves-effect waves-light as classes.



Let's take an example to demonstrate Materialize wave effect on buttons.

Test it Now


Materialize Waves 1
Next Topic#

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA