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= </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
Please Login to comment...