Live Demo - Social Media Share Button With Gooey Effect in Bootstrap 4

See Free Live Demo example of Creative gooey effects menu design with free source code. sticky responsive menu bootstrap. we are use gooey animation with bootstrap 4. In this gooey effects we use social icon. this is new best cool menu effect. gooey effects menu icon usign pure css. sticky responsive menu bootstrap 4. We allo...

<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body class="bg-dark">
	<div class="container">
		<div class="row mt-5">
			<div class="col-md-12 col-12 rounded">
				<nav class="social-menu">
				  <input type="checkbox" href="#" class="social-menu-open" name="social-menu-open" id="social-menu-open"/>
				  <label class="social-menu-open-button" for="social-menu-open">
				    <span class="hamburger hamburger-1"></span>
				    <span class="hamburger hamburger-2"></span>
				    <span class="hamburger hamburger-3"></span>
				  </label>
				  <a href="#" class="social-menu-item"> <i class="fa fa-facebook"></i> </a>
				  <a href="#" class="social-menu-item"> <i class="fa fa-twitter"></i> </a>
				  <a href="#" class="social-menu-item"> <i class="fa fa-pinterest"></i> </a>
				  <a href="#" class="social-menu-item"> <i class="fa fa-google"></i> </a>
				  <a href="#" class="social-menu-item"> <i class="fa fa-cog"></i> </a>
				</nav>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				      <filter id="shadowed-goo">
				          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
				          <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" />
				          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
				          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
				          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
				          <feBlend in2="shadow" in="goo" result="goo" />
				          <feBlend in2="goo" in="SourceGraphic" result="mix" />
				      </filter>
				      <filter id="goo">
				          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
				          <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 in2="goo" in="SourceGraphic" result="mix" />
				      </filter>
				</svg>
			</div>
		</div>
	</div>
  </body>
</html>

body {
  margin-top: 150px;
}
.social-menu {
  filter: url("#shadowed-goo");
  -webkit-filter: url("#shadowed-goo");
}
.social-menu-item, .social-menu-open-button {
  background: #00AAA0;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  top: 20px;
  color: white;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.social-menu-open {
  display: none;
}
.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
  -webkit-transform: translate3d(0, -8px, 0);
          transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.hamburger-3 {
  -webkit-transform: translate3d(0, 8px, 0);
          transform: translate3d(0, 8px, 0);
}
.social-menu-open:checked + .social-menu-open-button .hamburger-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
          transform: translate3d(0, 0, 0) rotate(45deg);
}
.social-menu-open:checked + .social-menu-open-button .hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
          transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.social-menu-open:checked + .social-menu-open-button .hamburger-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
          transform: translate3d(0, 0, 0) rotate(-45deg);
}
.social-menu {
  position: absolute;
  left: 50%;
  margin-left: -190px;
  padding-top: 20px;
  padding-left: 190px;
  width: 380px;
  height: 250px;
  box-sizing: border-box;
  font-size: 25px;
  text-align: left;
}
.social-menu-item:hover {
  background: #fff;
  color: #00AAA0;
}
.social-menu-item:nth-child(3) {
  transition-duration: 70ms;
}
.social-menu-item:nth-child(4) {
  transition-duration: 130ms;
}
.social-menu-item:nth-child(5) {
  transition-duration: 190ms;
}
.social-menu-item:nth-child(6) {
  transition-duration: 250ms;
}
.social-menu-item:nth-child(7) {
  transition-duration: 310ms;
}
.social-menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}
.social-menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
          transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.social-menu-open:checked + .social-menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
          transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.social-menu-open:checked ~ .social-menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(3) {
  transition-duration: 160ms;
  -webkit-transform: translate3d(114.42548px, 11.48084px, 0);
          transform: translate3d(114.42548px, 11.48084px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(4) {
  transition-duration: 240ms;
  -webkit-transform: translate3d(77.18543px, 85.2491px, 0);
          transform: translate3d(77.18543px, 85.2491px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(5) {
  transition-duration: 320ms;
  -webkit-transform: translate3d(0.09158px, 114.99996px, 0);
          transform: translate3d(0.09158px, 114.99996px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(6) {
  transition-duration: 400ms;
  -webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
          transform: translate3d(-77.04956px, 85.37192px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(7) {
  transition-duration: 480ms;
  -webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
          transform: translate3d(-114.40705px, 11.66307px, 0);
}