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.
Output:
👁 Bulma Button States
Reference: https://bulma.io/documentation/elements/button/#states
