Estados de Bulma Button – Barcelona Geeks

Las clases de estado de Bulma Button se utilizan para diseñar el botón de acuerdo con un estado específico. Usando las clases de estado de Bulma, podemos diseñar los botones como si estuvieran sobrevolando o enfocados sin activar ese estado.

Clases de estado de Bulma Button:

is-hovered: esta clase se usa para aplicar estilo al botón como si estuviera sobrevolado.
is-focused: esta clase se usa para diseñar el botón como si estuviera enfocado.
is-active: esta clase se usa para diseñar el botón como si estuviera en un estado inactivo.
esta cargando: esta clase se usa para hacer que el botón sea un botón de carga con una barra de progreso circular dentro.
es-estático: esta clase se utiliza para crear un botón no interactivo.
is-disabled: esta clase había quedado en desuso en favor del atributo HTML disabled. Los usuarios no pueden interactuar con un botón deshabilitado. No use esta clase, use el atributo disabled en su lugar.

Sintaxis:

<button class="button">
    Button
</button>

Ejemplo 1: el siguiente ejemplo utiliza las clases is-hovered , is-focused y is-active para diseñar el botón.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Button States</title>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
  
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b>Bulma Button States</b>
    <div class="container">
        <div>
            <span>Normal Button: </span>
          <button class="button">
            Normal
          </button>
        </div>
        <br>
        <div>
            <span>Hover State: </span>
          <button class="button is-hovered">
            Hover State
          </button>
        </div>
        <br>
        <div>
            <span>Focus State: </span>
          <button class="button is-focused">
            Focus State
          </button>
        </div>
        <br>
        <div>
            <span>Active State: </span>
          <button class="button is-active">
            Active State
          </button>
        </div>
        <br>
        <div>
            <span>Loading State: </span>
          <button class="button is-loading">
            Loading Button
          </button>
        </div>
        <br>
        <div>
            <span>Static State: </span>
          <button class="button is-static">
            Static Button</button>
        </div>
        <br>
        <div>
            <span>Disable State: </span>
          <button class="button" disabled>
              Disabled State
          </button>
        </div>
  
    </div>
</body>
</html>

Producción:

Bulma Button States

Referencia: https://bulma.io/documentation/elements/button/#states

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta