Buttons

There are some styles available for buttons and you can use both a and button tags. Buttons can be grouped using a container with the grouped class. If you need to align buttons on right you can also use the class align-right. To separate buttons you can wrap them in a container with group class. You can also add icons from Font Awesome or use UTF-8 emoticons. Here some examples

<div class="group">
  <button class="button">
    <span class="icon">
      <i class="fas fa-user"></i>
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button is-warning">
    <span class="icon">
      <i class="fas fa-ambulance"></i>
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button is-success">
    <span class="icon">
      <i class="fas fa-ambulance"></i>
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button is-danger">
    <span class="icon">
      <i class="fas fa-ad"></i>
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button is-primary">
    <span class="icon">
      <i class="fas fa-backspace"></i>
    </span>
    <span>
      Button
    </span>
  </button>
</div>
<div class="group">
  <button class="button">
    <span class="icon">
      💙
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button">
    <span class="icon">
      💕
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button">
    <span class="icon">
      😀
    </span>
    <span>
      Button
    </span>
  </button>
  <button class="button">
    <span class="icon">
      🍇
    </span>
    <span>
      Button
    </span>
  </button>
</div>
<div class="group">
  <button class="button">
    <span class="icon">
      🍩
    </span>
  </button>
  <button class="button">
    <span class="icon">
      🔒
    </span>
  </button>
  <button class="button">
    <span class="icon">
      🍉
    </span>
  </button>
  <button class="button">
    <span class="icon">
      🍔
    </span>
  </button>
</div>
<div class="group">
  <div class="grouped">
    <a class="button">
      <span class="icon">
        🍩
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🔒
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🍉
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🍔
      </span>
    </a>
  </div>
  <div class="grouped">
    <a class="button">
      <span class="icon">
        🍩
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🔒
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🍉
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🍔
      </span>
    </a>
  </div>
</div>
<div class="group">
  <div class="grouped">
    <a class="button">
      <span class="icon">
        🍩
      </span>
      <span>
        Button
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🔒
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🍉
      </span>
    </a>
    <a class="button">
      <span class="icon">
        🍔
      </span>
    </a>
  </div>
  <div class="grouped">
    <a class="button is-primary">
      <span>
        Button
      </span>
    </a>
    <a class="button is-primary">
      <span>
        Button
      </span>
    </a>
    <a class="button is-primary">
      <span>
        Button
      </span>
    </a>
    <a class="button is-primary">
      <span>
        Button
      </span>
    </a>
  </div>
  <div class="grouped">
    <a class="button">
      <span class="icon">
        <i class="fas fa-chess-pawn"></i>
      </span>
    </a>
    <a class="button">
      <span class="icon">
        <i class="fas fa-chess-knight"></i>
      </span>
    </a>
    <a class="button">
      <span class="icon">
        <i class="fas fa-chess-rook"></i>
      </span>
    </a>
  </div>
</div>