Bulma Button

Buttons are essential interactive elements in any user interface. Bulma provides a comprehensive button component with various styles, sizes, colors, and states that can be easily customized.

Basic Button

The basic button is created with the .button class:

<!-- Basic button -->
<button class="button">Click me</button>

<!-- Anchor as button -->
<a class="button">Link Button</a>

<!-- Input as button -->
<input class="button" type="submit" value="Submit">

<!-- Label as button -->
<label class="button">
  <input type="file" hidden>
  Choose File
</label>

Link ButtonFile Button

Button Colors

Bulma provides a wide range of color modifiers:

Primary Colors

<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

Button Sizes

<!-- Extra small -->
<button class="button is-small">Small</button>

<!-- Small -->
<button class="button is-small">Small</button>

<!-- Default -->
<button class="button">Default</button>

<!-- Normal -->
<button class="button is-normal">Normal</button>

<!-- Medium -->
<button class="button is-medium">Medium</button>

<!-- Large -->
<button class="button is-large">Large</button>

Button Styles

Outlined Buttons

<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Primary Outlined</button>
<button class="button is-success is-outlined">Success Outlined</button>
<button class="button is-danger is-outlined">Danger Outlined</button>

Rounded Buttons

<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Primary Rounded</button>
<button class="button is-success is-rounded">Success Rounded</button>

Inverted Buttons

<button class="button is-primary is-inverted">Inverted Primary</button>
<button class="button is-success is-inverted">Inverted Success</button>
<button class="button is-danger is-inverted">Inverted Danger</button>

Full Width Buttons

<button class="button is-primary is-fullwidth">Full Width Button</button>

Button States

Hover State

Buttons automatically have hover effects. For custom hover:

<button class="button is-primary is-hovered">Hover State</button>

Focus State

<button class="button is-primary is-focused">Focus State</button>

Active State

<button class="button is-primary is-active">Active State</button>

Loading State

<button class="button is-primary is-loading">Loading</button>
<button class="button is-loading">Loading</button>
<button class="button is-large is-primary is-loading">Large Loading</button>

Disabled State

<button class="button" disabled>Disabled Button</button>
<button class="button is-primary" disabled>Disabled Primary</button>
<a class="button is-disabled" tabindex="-1">Disabled Link</a>

Static Button

<span class="button is-static">Static</span>

Static

Buttons with Icons

Icon Only Buttons

<button class="button">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
</button>

<button class="button is-small">
  <span class="icon">
    <i class="fas fa-heart"></i>
  </span>
</button>

<button class="button is-large">
  <span class="icon">
    <i class="fas fa-star"></i>
  </span>
</button>

Buttons with Icon and Text

<button class="button">
  <span class="icon">
    <i class="fas fa-download"></i>
  </span>
  <span>Download</span>
</button>

<button class="button is-primary">
  <span class="icon">
    <i class="fas fa-check"></i>
  </span>
  <span>Save</span>
</button>

<button class="button is-danger">
  <span>Delete</span>
  <span class="icon">
    <i class="fas fa-times"></i>
  </span>
</button>

Icon on Right Side

<button class="button is-info">
  <span>Next</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
</button>

Responsive Buttons

<!-- Full width on mobile only -->
<button class="button is-fullwidth-mobile">Mobile Full Width</button>

<!-- Different sizes on different screens -->
<button class="button is-small-mobile is-medium-tablet is-large-desktop">
  Responsive Size
</button>

<!-- Hide on certain screens -->
<button class="button is-hidden-mobile">Visible on Tablet+</button>
<button class="button is-hidden-tablet-only">Hidden on Tablet Only</button>

Button Groups

Note: See the Buttons (Group) page for detailed information.

<!-- Basic button group -->
<div class="buttons">
  <button class="button">One</button>
  <button class="button">Two</button>
  <button class="button">Three</button>
</div>

<!-- Group with addons -->
<div class="buttons has-addons">
  <button class="button">Left</button>
  <button class="button">Center</button>
  <button class="button">Right</button>
</div>

Use Cases

1. Form Submission Buttons

<div class="field is-grouped">
  <div class="control">
    <button class="button is-primary">Submit</button>
  </div>
  <div class="control">
    <button class="button is-light">Cancel</button>
  </div>
  <div class="control">
    <button class="button is-text">Reset</button>
  </div>
</div>

2. Action Buttons

<div class="buttons">
  <button class="button is-success">
    <span class="icon">
      <i class="fas fa-check"></i>
    </span>
    <span>Approve</span>
  </button>
  <button class="button is-warning">
    <span class="icon">
      <i class="fas fa-edit"></i>
    </span>
    <span>Edit</span>
  </button>
  <button class="button is-danger">
    <span class="icon">
      <i class="fas fa-trash"></i>
    </span>
    <span>Delete</span>
  </button>
</div>

3. Social Media Buttons

<div class="buttons">
  <button class="button is-primary">
    <span class="icon">
      <i class="fab fa-facebook-f"></i>
    </span>
    <span>Facebook</span>
  </button>
  <button class="button is-info">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>Twitter</span>
  </button>
  <button class="button is-danger">
    <span class="icon">
      <i class="fab fa-google"></i>
    </span>
    <span>Google</span>
  </button>
  <button class="button is-dark">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
</div>

Customization

/* Custom button colors */
.button.is-custom {
  background-color: #8a4d76;
  border-color: #8a4d76;
  color: white;
}

.button.is-custom:hover {
  background-color: #7a3d66;
  border-color: #7a3d66;
}

.button.is-custom.is-outlined {
  background-color: transparent;
  border-color: #8a4d76;
  color: #8a4d76;
}

/* Gradient buttons */
.button.is-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

/* Custom button sizes */
.button.is-xsmall {
  font-size: 0.75rem;
  height: 1.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.button.is-xlarge {
  font-size: 1.5rem;
  height: 3.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Button with shadow */
.button.has-shadow {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
              0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.button.has-shadow:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1),
              0 3px 6px rgba(0, 0, 0, 0.08);
}

Accessibility

<!-- Properly labeled buttons -->
<button class="button" aria-label="Close dialog">
  <span class="icon">
    <i class="fas fa-times"></i>
  </span>
</button>

<!-- Button with screen reader text -->
<button class="button">
  <span class="icon">
    <i class="fas fa-download"></i>
  </span>
  <span>Download</span>
  <span class="sr-only">PDF document</span>
</button>

<!-- Button with proper focus management -->
<button class="button is-focused" autofocus>
  Primary Action
</button>

Best Practices

Use primary color for the main action on a page
Use consistent button sizes throughout your application
Provide clear and concise button labels
Use icons to enhance understanding when appropriate
Ensure sufficient contrast for accessibility
Test button states (hover, focus, active)
Use loading states for asynchronous actions
Make buttons large enough to tap on mobile devices

Tip: The is-loading class is perfect for indicating that an action is being processed, preventing multiple submissions.

Up next: Bulma Buttons (Group) Component

Bulma CSS Tutorial