Materializar botones CSS – Barcelona Geeks

El componente del botón junto con los enlaces dentro de ellos son probablemente una de las características más importantes que permiten a los usuarios interactuar con las páginas web y realizar diversas funciones y pasar de una página web a otra. A continuación se muestran las diversas clases de botones definidos junto con su efecto:

Elevado: se usa para establecer el efecto de clic de onda y también se puede usar en combinación con varias otras clases.

<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">list</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">list</i>button</a>

Flotante: se utiliza para crear un botón circular.

<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">edit</i></a>

Plano: se utiliza para configurar el efecto de pantalla plana en un botón que reduce el exceso de capas. Por ejemplo, los botones planos generalmente se usan para acciones dentro de una tarjeta para que no haya demasiadas sombras superpuestas.
```
 <a class="waves-effect waves-teal btn-flat">Button</a>
```

Botón Enviar: Se utiliza para representar como un botón principal. Al enviar un formulario usando el botón, en lugar de usar la etiqueta de entrada, se puede usar la etiqueta del botón con el tipo de envío.
```
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
```

Grande: se usa para botones que necesitan más atención.

<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">list</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">list</i>button</a>

Pequeño: se usa cuando el mouse y el teclado son los métodos de entrada principales, este botón se usa para diseños de interfaz de usuario más densos.

<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons left">list</i>button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons right">list</i>button</a>

Desactivado: Se utiliza para crear un botón de desactivación.

<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">edit</i></a>

Ejemplo:

HTML

<!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>
  
  <!--Let browser know website is
      optimized for mobile-->
  <meta name="viewport" content
    ="width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
  <div class="card-panel">
    <h3>Raised Button</h3>
    <a class="waves-effect waves-light 
        btn green">button</a>
    <a class="waves-effect waves-light 
        btn green"><i class="material-icons 
        left">list</i>button</a>
    <a class="waves-effect waves-light 
      btn green"><i class="material-icons
      right">list</i>button</a>
  </div>
  
  <div class="card-panel">
    <h3>Floating Button</h3>
    <a class="btn-floating btn-large 
      waves-effect waves-light teal">
      <i class="material-icons">edit</i>
    </a>
  
  </div>
  <div class="card-panel">
    <h3>Flat Button</h3>
    <a class="waves-effect waves-green 
      btn-flat">Button</a>
  
  </div>
  <div class="card-panel">
    <h3>Submit Button</h3>
    <button class="btn green waves-effect 
      waves-light" type="submit" 
      name="action">Submit
      <i class="material-icons right">send</i>
    </button>
  </div>
  <div class="card-panel">
    <h3>Large Button</h3>
    <a class="waves-effect waves-light 
        btn-large green">Button</a>
    <a class="waves-effect waves-light 
        btn-large green"><i class=
        "material-icons left">list</i>
        button
    </a>
    <a class="waves-effect waves-light 
      btn-large green"><i class="material-icons 
      right">list</i>button</a>
  
  </div>
  <div class="card-panel">
    <h3>Small Button</h3>
    <a class="waves-effect waves-light 
      btn-small green white-text">Button</a>
    <a class="waves-effect waves-light 
      btn-small green white-text"><i class=
      "material-icons left">list</i>button</a>
    <a class="waves-effect waves-light 
      btn-small green white-text"><i class=
      "material-icons right">list</i>button</a>
  
  </div>
  <div class="card-panel">
    <h3>Disabled Button</h3>
    <a class="btn-large disabled">Button</a>
    <a class="btn disabled">Button</a>
    <a class="btn-flat disabled">Button</a>
    <a class="btn-floating disabled">
      <i class="material-icons">edit</i></a>
  
  </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

HTML

Deja una respuesta Cancelar la respuesta