Button

<button class="button">Button</button>
<a class="button">Anchor</a>
<input class="button" type="submit" value="Submit">
<input class="button" type="reset" value="Reset">

<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-primary is-light">Light Primary</button>
<button class="button is-link is-light">Light Link</button>
<button class="button is-info is-dark">Dark Info</button>
<button class="button is-success is-dark">Dark Success</button>

<button class="button is-primary is-soft">Soft Primary</button>
<button class="button is-link is-soft">Soft Link</button>
<button class="button is-info is-bold">Bold Info</button>
<button class="button is-success is-bold">Bold Success</button>

<button class="button is-small">Small</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

<button class="button is-responsive is-small">Responsive Small</button>
<button class="button is-responsive">Responsive Normal</button>
<button class="button is-responsive is-medium">Responsive Medium</button>
<button class="button is-responsive is-large">Responsive Large</button>

<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-link is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>

<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-link is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>

<button class="button is-text">Text</button>
<button class="button is-text is-primary">Primary Text</button>

<button class="button is-ghost">Ghost</button>
<button class="button is-ghost">Ghost with icon</button>

<button class="button is-primary">Normal</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-primary is-active">Active</button>

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

<button class="button" disabled>Disabled</button>
<button class="button is-primary" disabled>Disabled</button>
<button class="button is-info is-outlined" disabled>Disabled</button>

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

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

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

<button class="button">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</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>

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

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

<div class="buttons">
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
</div>

<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
</div>

<div class="buttons are-medium">
  <button class="button">Medium</button>
  <button class="button">Medium</button>
</div>

<div class="buttons are-large">
  <button class="button">Large</button>
  <button class="button">Large</button>
</div>

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

<div class="buttons has-addons">
  <button class="button is-success is-selected">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons is-centered">
  <button class="button">Centered</button>
  <button class="button">Buttons</button>
</div>

<div class="buttons is-right">
  <button class="button">Right</button>
  <button class="button">Aligned</button>
</div>