Materialize CSS Waves

by Online Tutorials Library July 14, 2022

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:

Materialize Waves 1

Next Topic#

Materialize CSS Waves

Materialize CSS Waves

How to apply Materialize CSS Waves?

Example

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like