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).[codepen_embed height=”268″ theme_id=”0″ slug_hash=”ydwDI” default_tab=”result” user=”peiche”]See the Pen Google Inbox FAB With Font Awesome by Paul (@peiche) on CodePen.[/codepen_embed]
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.