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