logo DevAnswer - Developers Answer

Javascript Social Sharing Icons with Sticky Animation

30th December

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>                        



Other Codes