I got my invite into Inbox by Gmail a few days ago. I thought its floating action button was pretty nifty, so I set out to recreate it.

I ended up settling on using an existing project, Font Awesome, to drive the icons. It’s already easy to make stacked icons:

I am actually made up of two icons!

And here are the individual icons:


So it was a simple matter to add a few additional classes to support switching between one overlaid icon and another. The transition seems to be the same between the webapp and the native Android app, with the difference of one being on hover and the other being on tap (respectively). I made mine on click (tap, if you’re on a touchscreen device).

See the Pen Google Inbox FAB With Font Awesome by Paul (@peiche) on CodePen.0

Fun fact: the social media menu (located inside the hamburger button’s overlay) also uses stacked icons. Since I bundle Font Awesome (as of this writing, version 4.2) in my WordPress theme, it’s exceedingly simple.


  1. I’m pretty new to front-end dev and was wondering how does one go about getting this to float on the bottom right of the screen?

    1. Figured it out…and wow that was easy ;)

      #fabAction {
      position: fixed;
      bottom: 10px;
      right: 10px;

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.