Google Inbox style design using Bootstrap

Here i'm going to make google inbox style design using bootstrap with font-awesome icons. i hope everybody knew about google inbox that is similar like gmail. In that, there is an design for compose mail as i'm showing in the below image. like that only we are going do here. lets see the code.

DOWNLOAD LIVE DEMO

So, we are going to do that in bootstrap. so we need add all bootstrap css and js files will jquery plugin and also we have add font awesome css file.

BOOTSTRAP FILES

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
 rel="stylesheet" id="bootstrap-css">
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/
font-awesome.min.css'>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML CODE

<div class="container">
<div class="row">
<div id="inboxstyle">
<div class="fab btn-group show-on-hover dropup">
<div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;">
<button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown">
      <span class="fa-stack fa-2x">
          <i class="fa fa-circle fa-stack-2x fab-backdrop"></i>
          <i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i>
          <i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i>
      </span>
    </button>
  </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 1">
<i class="fa fa-coffee"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 2">
<i class="fa fa-calendar"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 3">
<i class="fa fa-user"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 4">
<i class="fa fa-eye"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 5">
<i class="fa fa-flag"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link6">
<i class="fa fa-spinner fa-spin"></i></a>
  </li>
  <li>
    <a href="#" data-toggle="tooltip" data-placement="top" title="Link 7">
<i class="fa fa-cog fa-fw"></i></a>
  </li>
</ul>
</div>
</div>
</div>
</div>

CSS CODE

<style type="text/css">
.fab {
cursor: pointer;
}
.fab-backdrop {
color: rgba(255, 255, 255, 0);
}
.fab-primary, .fab-secondary {
transition: all 0.35s ease-in-out;
}
.fab.active .fab-primary {
opacity: 0;
transform: rotate(225deg);
}
.fab-secondary {
opacity: 0;
transform: rotate(-225deg);
}
.fab.active .fab-secondary {
opacity: 1;
transform: rotate(0);
margin-top: -2px;
}
#inboxstyle .show-on-hover:hover > ul.dropdown-menu {
display: block;    
}
#inboxstyle .show-on-hover {
position: absolute;
bottom: 20px;
right: 20px;
}
#inboxstyle .btn-io{
border-radius: 50%;
height: 54px;
width: 60px;
padding: 0 !important;
box-shadow: 0px 3px 7px 0px rgba(202, 124, 124, 0.72);
}
#inboxstyle .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
margin-bottom: -5px;
padding-bottom: 30px;
}
#inboxstyle .dropdown-menu-right {
right: 0 !important;
left: auto !important;
}
#inboxstyle .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 50px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: center;
list-style: none;
background-color: rgba(255, 255, 255, 0) !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: none;
border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0) !important;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0) !important;
}
#inboxstyle .fa-iox{
font-size: 22px;
}
#inboxstyle .dropdown-menu > li > a {
display: block;
padding: 0;
padding-top: 4px;
margin-top: 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #fff;
background: #824076;
white-space: nowrap;
width: 40px;
height: 40px;
border: solid 1px #ccc;
border-radius: 50px;
font-size: 21px;
box-shadow: 0px 3px 7px 0px rgba(203, 203, 203, 0.72);
}
</style>

SCRIPT FOR TOOLTIP AND HOVER EFFECT

<script type="text/javascript">
  $('.fab').hover(function () {
    $(this).toggleClass('active');
  });
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  }) 
 </script>