SVG Filter Gooey Share, Social Media Button

index.html

<div class="container">
  <div class="button">Share</div>
  <div class="social twitter"><a href="https://twitter.com/sa_sha26" target="_blank"><i class="fa fa-twitter"></i></a></div>
  <div class="social facebook"><i class="fa fa-facebook"></i></div>
  <div class=" social google"><i class="fa fa-google-plus"></i></div>
  <div class="social youtube"><a href="https://www.youtube.com/channel/UCCATAa8MWoBuH-sR_Jlx29A" target="_blank"><i class="fa fa-youtube"></i></a></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>

script.js

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

@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;
  i {
   margin-top: 10px;
  }
  
  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);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

svg-filter-gooey-share-social-media-button.markdown

SVG Filter Gooey Share, Social Media Button

Click to see the goo magic :D

Kinda inspired from this Dribbble shot

A Pen by Sasha on CodePen.

License.