Materialize CSS
Materialize - Waves
Materialize CSS Waves is an external library that we've included to create the ink effect outlined in Material Design.
Applying Waves

The waves effect can be applied to any element. To put the waves effect on buttons, you just have to 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.

Following table mentions 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.
<!DOCTYPE html>
<html>
<head>
  <title>Materialize CSS Waves</title>
  <!--Responsive Meta Tag-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>

<body>


<div class="row">
    <div class="col s12 m8 l6 xl6 offset-m2 offset-l3 offset-xl3">
        <table class="bordered">
         <tbody>
            <tr>
               <td>Default</td>
               <td class="center-align"><a class="waves-effect blue btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-light</td>
               <td class="center-align"><a class="waves-effect blue waves-light btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-red</td>
               <td class="center-align"><a class="waves-effect blue waves-red btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-green</td>
               <td class="center-align"><a class="waves-effect blue waves-green btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-yellow</td>
               <td class="center-align"><a class="waves-effect blue waves-yellow btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-orange</td>
               <td class="center-align"><a class="waves-effect blue waves-orange btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-purple</td>
               <td class="center-align"><a class="waves-effect blue waves-purple btn" href="#!">Click Here !</a></td>
            </tr>
            <tr>
               <td>waves-teal</td>
               <td class="center-align"><a class="waves-effect blue waves-teal btn" href="#!">Click Here !</a></td>
            </tr>
         </tbody>
        </table>
    </div>
</div>

<!--Import jQuery Library-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Import materialize.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

</body>
</html>
Output :
Circle Waves

Add the waves-circle class it displayed circle shape and add to waves-effect.

<!DOCTYPE html>
<html>
<head>
  <title>Materialize CSS Waves</title>
  <!--Responsive Meta Tag-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>
<body>


<div class="row">
    <div class="col s12 m6 l4 xl4 offset-m3 offset-l4 offset-xl4">
        <table class="bordered center-align">
         <tbody>
            <tr>
               <td>Default</td>
               <td class="center-align"><a class="waves-effect waves-circle blue btn-floating secondary-content" href="#!"><i class="material-icons">add</i></td>
            </tr>
            <tr>
               <td>waves-light</td>
               <td class="center-align"><a class="waves-effect blue waves-light btn-floating secondary-content" href="#!"><i class="material-icons">attachment</i></a></td>
            </tr>
            <tr>
               <td>waves-red</td>
               <td class="center-align"><a class="waves-effect blue waves-red btn-floating secondary-content" href="#!"><i class="material-icons">delete_forever</i></a></td>
            </tr>
            <tr>
               <td>waves-green</td>
               <td class="center-align"><a class="waves-effect blue waves-green btn-floating secondary-content" href="#!"><i class="material-icons">brush</i></a></td>
            </tr>
            <tr>
               <td>waves-yellow</td>
               <td class="center-align"><a class="waves-effect blue waves-yellow btn-floating secondary-content" href="#!"><i class="material-icons">build</i></a></td>
            </tr>
            <tr>
               <td>waves-orange</td>
               <td class="center-align"><a class="waves-effect blue waves-orange btn-floating secondary-content" href="#!"><i class="material-icons">camera</i></a></td>
            </tr>
            <tr>
               <td>waves-purple</td>
               <td class="center-align"><a class="waves-effect blue waves-purple btn-floating secondary-content" href="#!"><i class="material-icons">cloud_upload</i></a></td>
            </tr>
            <tr>
               <td>waves-teal</td>
               <td class="center-align"><a class="waves-effect blue waves-teal btn-floating secondary-content" href="#!"><i class="material-icons">location_on</i></a></td>
            </tr>
         </tbody>
        </table>
    </div>
</div>

<!--Import jQuery Library-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Import materialize.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

</body>
</html>
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.