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>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>