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: