Materializar - Botones

Materialise proporciona diferentes clases de CSS para aplicar varias mejoras visuales y de comportamiento predefinidas a los botones. La siguiente tabla menciona las clases disponibles y sus efectos.

No Señor. Nombre y descripción de la clase
1

btn

Establece el botón o ancla como botón Materializar, obligatorio. Establece el efecto de visualización elevado en un botón.
2

btn-floating

Crea un botón circular.
3

btn-flat

Establece el efecto de pantalla plana en un botón, predeterminado.
4

btn-large

Crea botones grandes.
5

disabled

Crea un botón deshabilitado.
6

type = "submit"

Representa un ancla o un botón como botón principal.
7

waves-effect

Establece el efecto de clic ondulado, se puede utilizar en combinación con cualquier otra clase.

Ejemplo

El siguiente ejemplo demuestra el uso de clases de botones mdl para mostrar diferentes tipos de botones.

materialize_buttons.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/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> 
   </head>
   
   <body class = "container"> 
      <div class = "card-panel">
         <h5>Raised Buttons</h5>
         <button class = "btn waves-effect waves-teal">Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons left">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons right">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal disabled">Add</button></td>
      </div>
      
      <div class = "card-panel">
         <h5>Flat Buttons</h5>
         <button class = "btn-flat waves-effect waves-teal">Add</button></td>
         <button class = "btn-flat waves-effect waves-teal disabled" >
            <i class = "material-icons left">add</i>Add</button></td>
      </div>
      
      <div class = "card-panel">
         <h5>Floating Buttons</h5>
         <a class = "btn-floating waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating waves-effect waves-light red disabled" >
            <i class = "material-icons">add</i></a>
      </div>
      
      <div class = "card-panel">
         <h5>Primary Buttons</h5>
         <button class = "btn waves-effect waves-light red" type = "submit">Send
            <i class = "material-icons right">send</i></button>
         <button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
            <i class = "material-icons right">cancel</i></button>
      </div>
      
      <div class = "card-panel">
         <h5>Large Buttons</h5>
         <a class = "btn-floating btn-large waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating btn-large waves-effect waves-light red disabled">
            <i class = "material-icons">add</i></a>
      </div>
   </body>   
</html>

Resultado

Verifique el resultado.