VOOZH about

URL: https://www.geeksforgeeks.org/css/bulma-button-styles/

⇱ Bulma Button Styles - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bulma Button Styles

Last Updated : 23 Jul, 2025

Bulma Button style class is used to set the style of the button. There are four pre-defined button styles in Bulma: Outlined, Inverted, Outlined Inverted, and Rounded. You can set the button style with the help of three CSS classes provided by Bulma.

Bulma Button Styles Classes:
  • is-outlined: This class is used to set the button style to outlined.
  • is-inverted: This class swaps the text color with the background color.
  • is-rounded: This class is used to make the corners of the button rounded.

Syntax:

<button class="button is-outlined">
 Button
</button>

Note: The is-outlined and is-inverted classes can be used together to make Outlined Inverted Buttons.

Example: The example below shows the use of Bulma button-style classes.

Output: 

👁 Bulma Button Styles

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

Comment
Article Tags: