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:
Recommended Posts:
- How to create waves on button with CSS and HTML?
- Materialize CSS | Preloader
- Materialize CSS | Colors
- Materialize CSS | Grids
- Materialize CSS | Tables
- Materialize CSS | Helpers
- Materialize CSS | Badges
- Materialize CSS | Breadcrumbs
- Materialize CSS | Media
- Materialize CSS | Buttons
- Materialize CSS | Footer
- Materialize CSS | Typography
- Materialize CSS | Collections
- Materialize CSS | Pagination
- Materialize CSS | Icons
- Materialize CSS Navbars
- Materialize CSS - Modals
- Materialize CSS Dropdown
- Materialize CSS - Pulse and Shadow
- Materialize CSS | Tooltips
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
