Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600");
body {
font-family: "Source Sans Pro", sans-serif;
background: linear-gradient(#B388EB, #8093F1, #00B2CA);
background: #4A5759;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
filter: url("#goo");
}
.button {
z-index: 99;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
background: linear-gradient(45deg, #B388EB, #8093F1);
border-radius: 20px;
color: #FFF;
font-size: 20px;
letter-spacing: 1px;
font-weight: 200;
}
.social {
opacity: 0;
position: relative;
margin: 8px;
width: 40px;
height: 40px;
border-radius: 100%;
display: inline-block;
color: #FFF;
font-size: 20px;
text-align: center;
}
.social i {
margin-top: 10px;
}
.social a {
color: #FFF;
}
.twitter {
background: #00aced;
}
.facebook {
background: #3b5998;
}
.google {
background: #dd4b39;
}
.youtube {
background: #bb0000;
}
.clicked {
opacity: 1;
transition: 1.2s all ease;
transform: translateY(56px);
}
</style>
</head>
<body>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<div class="container">
<div class="button">Share</div>
<div class="social twitter"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></div>
<div class="social facebook"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></div>
<div class=" social google"><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></div>
<div class="social youtube"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></div>
</div>
<svg xmlns="#" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(".button").click(function () {
$(".social.twitter").toggleClass("clicked");
$(".social.facebook").toggleClass("clicked");
$(".social.google").toggleClass("clicked");
$(".social.youtube").toggleClass("clicked");
})
</script>
</body>
</html>