Open In App

Materialize CSS Waves

Last Updated : 16 May, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
"https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">
        
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" 
              href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
        <script type = "text/javascript"
                src = 
"https://code.jquery.com/jquery-2.1.1.min.js">
        </script>           
     <script src = 
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
     </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=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
        </script>
          
      </body>
</html>
 






                        








Output:




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Materialize CSS Tooltips
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Materialize CSS Checkbox
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to create waves on button with CSS and HTML?
            

        
    
        
            

                Materialize CSS Preloader
            

        
    
        
            

                Explain Dialogs in Materialize CSS
            

        
    
        
            

                Materialize CSS Colors
            

        
    
        
            

                Materialize CSS Grids
            

        
    
        
            

                Materialize CSS | Tables
            

        
    
        
            

                Materialize CSS Helpers
            

        
    
        
            

                Materialize CSS Badges
            

        
    
        
            

                Materialize CSS Breadcrumbs
            

        
    
        
            

                Materialize CSS Media
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
T

        

            
        

        

                                    


                                    

                                        tanvi_gupta                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox