HTML
<div id="presentation">
<h1>Floating Button - Google Inbox</h1>
<h3>Only CSS</h3>
</div>
<div id="container-floating">
<div class="nd5 nds" data-toggle="tooltip" data-placement="left" data-original-title="Simone"></div>
<div class="nd4 nds" data-toggle="tooltip" data-placement="left" data-original-title="contract@gmail.com"><img class="reminder">
<p class="letter">C</p>
</div>
<div class="nd3 nds" data-toggle="tooltip" data-placement="left" data-original-title="Reminder"><img class="reminder" src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_reminders_speeddial_white_24dp.png" /></div>
<div class="nd1 nds" data-toggle="tooltip" data-placement="left" data-original-title="Edoardo@live.it"><img class="reminder">
<p class="letter">E</p>
</div>
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create" onclick="newmail()">
<p class="plus">+</p>
<img class="edit" src="http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/bt_compose2_1x.png">
</div>
</div>
CSS
body{
font-family: 'Roboto';
text-align: center;
background: #f1f1f1;
}
h3{
color: #555;
}
#presentation{
width: 480px;
height: 120px;
padding: 20px;
margin: auto;
background: #FFF;
margin-top: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
transition: all 0.3s;
border-radius: 3px;
}
#presentation:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transition: all 0.3s;
transform: translateZ(10px);
}
#floating-button{
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus{
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
animation: plus-out 0.3s;
transition: all 0.3s;
}
#container-floating{
position: fixed;
width: 70px;
height: 70px;
bottom: 30px;
right: 30px;
z-index: 50px;
}
#container-floating:hover{
height: 400px;
width: 90px;
padding: 30px;
}
#container-floating:hover .plus{
animation: plus-in 0.15s linear;
animation-fill-mode: forwards;
}
.edit{
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
display: block;
right: 0;
padding: 0;
opacity: 0;
margin: auto;
line-height: 65px;
transform: rotateZ(-70deg);
transition: all 0.3s;
animation: edit-out 0.3s;
}
#container-floating:hover .edit{
animation: edit-in 0.2s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
@keyframes edit-in{
from {opacity: 0; transform: rotateZ(-70deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
@keyframes edit-out{
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(-70deg);}
}
@keyframes plus-in{
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(180deg);}
}
@keyframes plus-out{
from {opacity: 0; transform: rotateZ(180deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
.nds{
width: 40px;
height: 40px;
border-radius: 50%;
position: fixed;
z-index: 300;
transform: scale(0);
cursor: pointer;
}
.nd1{
background: #d3a411;
right: 40px;
bottom: 120px;
animation-delay: 0.2s;
animation: bounce-out-nds 0.3s linear;
animation-fill-mode: forwards;
}
.nd3{
background: #3c80f6;
right: 40px;
bottom: 180px;
animation-delay: 0.15s;
animation: bounce-out-nds 0.15s linear;
animation-fill-mode: forwards;
}
.nd4{
background: #ba68c8;
right: 40px;
bottom: 240px;
animation-delay: 0.1s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
.nd5{
background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
background-size: 100%;
right: 40px;
bottom: 300px;
animation-delay: 0.08s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
@keyframes bounce-nds{
from {opacity: 0;}
to {opacity: 1; transform: scale(1);}
}
@keyframes bounce-out-nds{
from {opacity: 1; transform: scale(1);}
to {opacity: 0; transform: scale(0);}
}
#container-floating:hover .nds{
animation: bounce-nds 0.1s linear;
animation-fill-mode: forwards;
}
#container-floating:hover .nd3{
animation-delay: 0.08s;
}
#container-floating:hover .nd4{
animation-delay: 0.15s;
}
#container-floating:hover .nd5{
animation-delay: 0.2s;
}
.letter{
font-size: 23px;
font-family: 'Roboto';
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0;
top: 0;
bottom: 0;
text-align: center;
line-height: 40px;
}
.reminder{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
line-height: 40px;
}
.profile{
border-radius: 50%;
width: 40px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 20px;
}
