Materializar ondas CSS

Materialise incluye una onda de biblioteca externa para crear un efecto de tinta descrito en Material Design. Las ondas se pueden aplicar a cualquier elemento, para usar este efecto en los botones, se agrega la clase de efecto de onda al botón.

Hay varias formas de clasificar las ondas. Se puede hacer ya sea por clases pre-creadas o creando una nueva clase con diferentes colores.

<a class="waves-effect waves-light btn-large" href="#">Wave</a>

Ejemplo:

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

Producción:

Publicación traducida automáticamente

Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *