Bulma: A Floating Action Button (FAB)

[xenoterracide]

Im not looking for a Material Design framework, however the FAB is the one thing I would like from that world. It does't appear to be available https://bulma.io/documentation/elements/button/ . Could we get one?

[rbrtbrnschn]

agreed

[ravilution]

This is how I did. I needed my FAB to be in the bottom center. If you don't want it in center you can add is-fab class without width:100% directly to button.

.is-fab {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.has-content-centered {
  display: flex;
  justify-content: center;
}

<div class="is-fab has-content-centered">
  <button class="button is-primary is-rounded">
    <span class="icon">
      <i class="fas fa-pen-fancy"></i>
    </span>
    <span>Post</span>
  </button>
</div>

[xenoterracide]

that code didn't work for me at all... the icon was off the screen, wasn't until I deleted all the css that it showed up.

[ravilution]

that code didn't work for me at all... the icon was off the screen, wasn't until I deleted all the css that it showed up.

You will have to keep the is-fab div directly under body. I mean at the root of body.

[xenoterracide]

:/ that's not really going to work for my frameworked code

this seems to

.is-fab {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  :hover {
    color: bulmaDarken($primary, 2.5%);
  }
}

md5-30899009a3393ba97c7413380244f422

though I'm not certain if I should do other border/color/transformation things to be consistent with other bulma buttons

[alakise]

Hello,
I've made an extension for Bulma to create floating buttons https://www.npmjs.com/package/bulma-floating-button
Few days ago I wanted to use a floating button in my Bulma project too, then found this issue. Eventually, I could not find anything so I decided to create on my own. I hope it helps. I will create a pull request to Bulma soon.

[gasci]

Thank you @alakise for your contribution. This is an extension that we have been expecting for so long.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.