<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');
});
});
