Inbox’s floating action button

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:

Circle
Star

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).

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.

3 responses

  1. iantrich Avatar

    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. iantrich Avatar

      Figured it out…and wow that was easy ;)

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

  2. How do I input this on my Blogger?

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Related