<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<head>
<style class="cp-pen-styles">
.plus-button {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 100;
height: 75px;
width: 75px;
border-radius: 100%;
background-color: #e91e63;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
.plus-button::before {
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 600;
}
.plus-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.plus-button.open {
-webkit-transform: rotate(45deg) scale(0.92);
transform: rotate(45deg) scale(0.92);
background-color: #333;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
}
.plus-button.open:hover {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button.open:active {
-webkit-transform: scale(0.96) rotate(45deg);
transform: scale(0.96) rotate(45deg);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.social-button {
position: absolute;
bottom: 43px;
right: 41px;
height: 50px;
width: 50px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
background-size: 153% !important;
border-radius: 100%;
box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.4);
cursor: pointer;
z-index: 99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
}
.social-button.twitter-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
}
.social-button.twitter-button.active {
bottom: 110px;
right: 21px;
}
.social-button.facebook-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
}
.social-button.facebook-button.active {
bottom: 105px;
right: 73px;
}
.social-button.pinterest-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
}
.social-button.pinterest-button.active {
bottom: 67px;
right: 109px;
}
.social-button.insta-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
}
.social-button.insta-button.active {
bottom: 15px;
right: 105px;
}
</style>
</head>
<body>
<div class="plus-button"></div>
<div class="social-button twitter-button"></div>
<div class="social-button facebook-button"></div>
<div class="social-button pinterest-button"></div>
<div class="social-button insta-button"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('.plus-button').click(function(){
$(this).toggleClass('open');
$('.social-button').toggleClass('active');
});
});
</script>
</body>
</html>
