"Material toggle button phone"
Bootstrap 3.3.0 Snippet by fakhreddine

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" /> <div class="material-button-anim"> <ul class="list-inline" id="options"> <li class="option"> <button class="material-button option1" type="button"> <span class="fa fa-phone" aria-hidden="true"></span> </button> </li> <li class="option"> <button class="material-button option2" type="button"> <span class="fa fa-envelope-o" aria-hidden="true"></span> </button> </li> <li class="option"> <button class="material-button option3" type="button"> <span class="fa fa-pencil" aria-hidden="true"></span> </button> </li> </ul> <button class="material-button material-button-toggle" type="button"> <div class="material-button material-anim one">1</div> <div class="material-button material-anim two">2</div> <span class="fa fa-phone" aria-hidden="true"></span> </button> </div>
/*------------------------- Please follow me @maridlcrmn /*-------------------------*/ body { padding-top: 50px; } .material-button-anim { position: absolute; bottom:10%; right:0; padding: 127px 15px 27px; text-align: center; max-width: 320px; } .material-button { position: relative; top: 0; z-index: 1; width: 70px; height: 70px; font-size: 1.5em; color: #fff; background: #2C98DE; border: none; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.275); outline: none; } .material-button-toggle { z-index: 3; width: 90px; height: 90px; margin: 0 auto; } .material-button-toggle span { position:relative; z-index:999; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67); transition: transform .175s cubic-bazier(.175,.67,.83,.67); } .material-button-toggle.open { -webkit-transform: scale(1.3,1.3); transform: scale(1.3,1.3); -webkit-animation: toggleBtnAnim .175s; animation: toggleBtnAnim .175s; } .material-button-toggle.open span { -webkit-transform: rotate(230deg); transform: rotate(230deg); -webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67); transition: transform .175s cubic-bazier(.175,.67,.83,.67); } #options { height: 70px; } .option { position: relative; } .option .option1, .option .option2, .option .option3 { filter: blur(5px); -webkit-filter: blur(5px); -webkit-transition: all .175s; transition: all .175s; } .option .option1 { -webkit-transform: translate3d(90px,90px,0) scale(.8,.8); transform: translate3d(90px,90px,0) scale(.8,.8); } .option .option2 { -webkit-transform: translate3d(0,90px,0) scale(.8,.8); transform: translate3d(0,90px,0) scale(.8,.8); } .option .option3 { -webkit-transform: translate3d(-90px,90px,0) scale(.8,.8); transform: translate3d(-90px,90px,0) scale(.8,.8); } .option.scale-on .option1, .option.scale-on .option2, .option.scale-on .option3 { filter: blur(0); -webkit-filter: blur(0); -webkit-transform: none; transform: none; -webkit-transition: all .175s; transition: all .175s; } .option.scale-on .option2 { -webkit-transform: translateY(-28px) translateZ(0); transform: translateY(-28px) translateZ(0); -webkit-transition: all .175s; transition: all .175s; } @keyframes toggleBtnAnim { 0% { -webkit-transform: scale(1,1); transform: scale(1,1); } 25% { -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } 75% { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } 100% { -webkit-transform: scale(1.3,1.3); transform: scale(1.3,1.3); } } @-webkit-keyframes toggleBtnAnim { 0% { -webkit-transform: scale(1,1); transform: scale(1,1); } 25% { -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } 75% { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } 100% { -webkit-transform: scale(1.3,1.3); transform: scale(1.3,1.3); } } @keyframes bounce { 0% {margin-top:0;} 50% {margin-top:-15px; margin-bottom:15px;} 100% {margin-top:0;} } @keyframes roket-roket-circle-anim { 0% { transform: rotate(0deg) scale(1) skew(0deg); opacity: 0.1; } 30% { transform: rotate(0deg) scale(1.25) skew(0deg); opacity: 0.25; } 100% { transform: rotate(0deg) scale(1.5) skew(0deg); opacity: 0; } } .material-button-toggle:not(:hover):not(:focus):not(:active) { transition:.25s !important; animation: 2.25s bounce infinite !important; } .material-anim { width: 100%; height: 100%; text-indent: -9999px; z-index: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: none; } .material-anim.one { -webkit-animation: roket-roket-circle-anim 1.2s infinite ease-in-out !important; -moz-animation: roket-roket-circle-anim 1.2s infinite ease-in-out !important; -ms-animation: roket-roket-circle-anim 1.2s infinite ease-in-out !important; -o-animation: roket-roket-circle-anim 1.2s infinite ease-in-out !important; animation: roket-roket-circle-anim 1.2s infinite ease-in-out !important; -webkit-transition: all 0.5s !important; -moz-transition: all 0.5s !important; -o-transition: all 0.5s !important; transition: all 0.5s !important; } .material-anim.two { border: 2px solid #2C98DE !important; opacity: 0.1 !important; background:none !important; -webkit-animation: roket-roket-circle-anim 1.9s infinite ease-in-out !important; -moz-animation: roket-roket-circle-anim 1.9s infinite ease-in-out !important; -ms-animation: roket-roket-circle-anim 1.9s infinite ease-in-out !important; -o-animation: roket-roket-circle-anim 1.9s infinite ease-in-out !important; animation: roket-roket-circle-anim 1.9s infinite ease-in-out !important; -webkit-transition: all 0.5s !important; -moz-transition: all 0.5s !important; -o-transition: all 0.5s !important; transition: all 0.5s !important; }
$(document).ready(function () { $('.material-button-toggle').hover(function () { $(this).toggleClass('open'); $('.option').toggleClass('scale-on'); }); });

Related: See More


Questions / Comments: