Bulma Button States

Bulma Button state classes are used to style the button according to a specific state. Using Bulma state classes we can style the buttons like if it is being hovered or is in focus without triggering that state.

Bulma Button State classes:

is-hovered: This class is used to style the button as if it is being hovered.
is-focused: This class is used to style the button as if it is in focus.
is-active: This class is used to style the button as if it is in an inactive state.
is-loading: This class is used to make the button a loading button with a circular progress bar inside it.
is-static: This class is used to create a non-interactive button.
is-disabled: This class had been deprecated in favor of the HTML disabled attribute. Users cannot interact with a disabled button. Do not use this class, use the disabled attribute instead.

Syntax:

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

Example1: The below example uses is-hovered, is-focused, and is-active classes to style the button.

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>

Output:

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

Explore