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.

Wave

Example

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Waves Effects Example</h3>
      <div class="collection waves-color-demo">
            <div class="collection-item">Default<a href="#!" 
			class="waves-effect btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-light</code><
			a href="#!" class="waves-effect waves-light btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-red</code><
			a href="#!" class="waves-effect waves-red btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-yellow</code><
			a href="#!" class="waves-effect waves-yellow btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-orange</code><
			a href="#!" class="waves-effect waves-orange btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-purple</code><
			a href="#!" class="waves-effect waves-purple btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-green</code><
			a href="#!" class="waves-effect waves-green btn secondary-content">Send</a></div>
            <div class="collection-item"><code 
			class="language-markup">waves-teal</code><
			a href="#!" class="waves-effect waves-teal btn secondary-content">Send</a></div>
          </div>
        </div>
   </body>
</html>

Test it Now

Output: