Material floating button CSS

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; }
JAVASCRIPT
Expand for more options Login