• HTML
• CSS
• JS

HTML

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-bar">
    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>

CSS

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
ul{
    position:fixed;
    bottom:0px;
    right:15px;
    padding:0;
    width:60px;
    height:60px;
}
ul:before{
    content:'\\f1e0';
    font-family:fontAwesome;
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(45deg,#ff00ff,#8a2be2);
    border-radius:50%;
    text-align:center;
    line-height:60px;
    color:#fff;
    font-size:30px;
    transition:0.5s;
    cursor:pointer;
    z-index:1;
}
ul.active:before{
    background:#eee;
    color:#000;
}
ul li{
    position:absolute;
    list-style:none;
    transition:1s;
}
ul li a{
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#262626;
    color:#fff;
    margin:5px 5px;
    border-radius:50%;
    font-size:20px;
    transition:1s;
}
ul li:nth-child(1) a{
    background:#3b5999;
}
ul li:nth-child(2) a{
    background:#55acee;
}
ul li:nth-child(3) a{
    background:#dd4b39;
}
ul li:nth-child(4) a{
    background:#0077B5;
}
ul li:nth-child(5) a{
    background:#e4405f;
}
ul.active li:nth-child(1) a{
    transform:translateY(-64px) rotate(360deg);
    transition-delay:0.8s;
}
ul.active li:nth-child(2) a{
    transform:translateY(-128px) rotate(360deg);
    transition-delay:0.6s;
}
ul.active li:nth-child(3) a{
    transform:translateY(-192px) rotate(360deg);
    transition-delay:0.4s;
}
ul.active li:nth-child(4) a{
    transform:translateY(-256px) rotate(360deg);
    transition-delay:0.2s;
}
ul.active li:nth-child(5) a{
    transform:translateY(-320px) rotate(360deg);
    transition-delay:0s;
}

JS

const socialBar = document.querySelector('.social-bar');

socialBar.onclick = function(){
    socialBar.classList.toggle('active');
}