Materialize CSS | Waves
Materialize includes an external library wave to create ink effect outlined in Material Design. Waves can be applied to any element, to use this effect on buttons, wave-effect class is added to the button.
There are several ways by which waves can be classified. It can be done either by pre-created classes or by creating a new class with different colors.
<a class="waves-effect waves-light btn-large" href="#">Wave</a>
Example:
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= <script type = "text/javascript" src = </script> <script src = </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body class="container"> <h2 class="center">Waves</h2> <div class="card-panel "> <div class="row"> <div class="col s8"><h4>Default </h4></div> <div class="col s4"><a href="#!" class= "btn-large waves-effect waves-teal black-text white"> Click me!!</a></div> </div> </div> <div class="card-panel"> <div class="row"> <div class="col s8"><h4>wave-light</h4></div> <div class="col s4"><a href="#!" class="btn-large waves-effect waves-light"> Click me!!</a></div> </div> </div> <div class="card-panel"> <div class="row"> <div class="col s8"><h4>wave-yellow </h4></div> <div class="col s4"> <a href="#!" class= "btn-large waves-effect waves-yellow black-text white"> Click me!!</a></div> </div> </div> <div class="card-panel"> <div class="row"> <div class="col s8"><h4>wave-orange </h4></div> <div class="col s4"> <a href="#!" class= "btn-large waves-effect waves-orange black-text white"> Click me!!</a></div> </div> </div> <div class="card-panel"> <div class="row"> <div class="col s8"><h4>wave-purple</h4></div> <div class="col s4"> <a href="#!" class= "btn-large waves-effect waves-purple black-text white"> Click me!!</a></div> </div> </div> <div class="card-panel"> <div class="row"> <div class="col s8"><h4>wave-green</h4></div> <div class="col s4"> <a href="#!" class= "btn-large waves-effect waves-green black-text white"> Click me!!</a></div> </div> </div> <div class="card-panel"> <div class="row"> <div class="col s8"><h4>wave-teal</h4></div> <div class="col s4"> <a href="#!" class= "btn-large waves-effect waves-teal black-text white"> Click me!!</a></div> </div> </div> <!-- Compiled and minified JavaScript --> <script src= </script> </body> </html> |
chevron_right
filter_none
Output:
