Share Media Button

Share Media Button

by rajnishw3

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="button">Share</div>
  <div class="social twitter"><i class="fa fa-twitter"></i></div>
  <div class="social facebook"><a href="https://www.facebook.com/sa.amandixit"><i class="fa fa-facebook"></i></a></div>
  <div class=" social google"><i class="fa fa-google-plus"></i></div>
  <div class="social youtube"><i class="fa fa-youtube"></i></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" 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>

CSS

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

JavaScript

$(".button").click(function(){
  $(".social.twitter").toggleClass("clicked");
  $(".social.facebook").toggleClass("clicked");
 $(".social.google").toggleClass("clicked");
  $(".social.youtube").toggleClass("clicked");
})