Open In App

Bulma Button States

Improve
Improve
Like Article
Like
Save
Share
Report

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=
  
</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:

Bulma Button States

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



Last Updated : 16 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads