You can use this code to display more beautiful social media icons on your website. In this code at first, the social network icon is drawn in black with dragging animation. Then it turns white and full. Also, each icon gets bigger in Hover mode.
HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.min.js'></script>
<div class="wrap-facebook">
<svg id="facebook" viewBox="0 0 16 16" class="logo">
<path id="facebook-path1" class="path1"d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"style="fill:none;stroke-width:0.50px;stroke:black;"/>
</svg>
</div>
<div class="wrap-twitter">
<svg id="twitter" class="logo" viewBox="0 0 16 16">
<path id="twitter-path1" class="path1" d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"style="fill:none;stroke-width:0.50px;stroke:black;"/>
</svg>
</div>
<div class="wrap-instagram">
<svg id="instagram" class="logo" viewBox="0 0 16 16">
<path id="instagram-path1" class="path1" d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"style="fill:none;stroke-width:0.50px;stroke:black;"/></svg>
</div>
<div class="wrap-snapchat">
<svg id="snapchat" class="logo" viewBox="0 0 16 16">
<path id="snapchat-path1" class="path1" d="M8.155.48c.662 0 2.903.185 3.96 2.552.354.797.27 2.15.2 3.237l-.002.045c-.008.12-.015.232-.02.342.05.028.135.06.268.067.2-.01.432-.074.69-.195.11-.053.228-.063.307-.063.116 0 .234.022.333.063.297.107.484.32.488.56.006.304-.266.567-.808.78-.066.027-.147.053-.233.08-.306.097-.768.244-.894.54-.065.153-.04.35.077.586l.008.016c.04.094 1.02 2.326 3.194 2.685.167.028.287.177.277.346-.003.05-.015.1-.036.15-.163.38-.852.66-2.105.853-.043.057-.086.256-.113.377-.027.123-.054.244-.092.372-.052.18-.183.277-.37.277H13.267c-.09 0-.21-.015-.36-.045-.242-.047-.512-.09-.854-.09-.2 0-.404.017-.61.05-.406.07-.75.31-1.148.593-.57.403-1.215.86-2.196.86-.045 0-.086-.002-.118-.004l-.08.003c-.982 0-1.627-.457-2.197-.86-.398-.28-.742-.524-1.146-.592-.21-.034-.414-.05-.613-.05-.358 0-.644.055-.853.095-.14.028-.26.05-.36.05-.253 0-.35-.153-.39-.28-.038-.132-.065-.256-.09-.377-.028-.12-.07-.322-.113-.378C.89 12.933.2 12.654.037 12.272c-.02-.048-.033-.1-.035-.15-.01-.168.11-.317.278-.345 2.174-.358 3.154-2.59 3.194-2.685l.008-.016c.116-.236.142-.433.077-.586-.126-.296-.588-.443-.895-.54-.085-.027-.165-.053-.232-.08-.74-.292-.844-.628-.8-.858.06-.32.45-.535.778-.535.094 0 .18.017.253.052.28.13.527.195.737.195.157 0 .257-.037.31-.067-.006-.13-.015-.262-.023-.39-.068-1.086-.153-2.438.202-3.234C4.94.668 7.178.484 7.838.484L8.115.48h.04z" style="fill:none;stroke-width:0.50px;stroke:black;"/>
</svg>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body,
html {
width: 100%;
height: 100%;
}
svg {
width: 100%;
height: 50%;
}
.wrap-snapchat {
width: 50%;
height: 50%;
position: relative;
display: block;
float: left;
overflow: hidden;
background-color: #FFFC00;
}
.wrap-twitter {
width: 50%;
height: 50%;
position: relative;
display: block;
float: left;
overflow: hidden;
background-color: #00aced;
}
.wrap-facebook {
width: 50%;
height: 50%;
position: relative;
display: block;
float: left;
overflow: hidden;
background-color: #3b5998;
}
.wrap-instagram {
width: 50%;
height: 50%;
position: relative;
display: block;
float: left;
overflow: hidden;
background-color: #262626;
}
.logo {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.logo:hover {
-moz-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
-o-transform: scale(2, 2);
-ms-transform: scale(2, 2);
transform: scale(2, 2);
}Javascript
$(function () {
var myCallback = function () { };
var myElements = document.getElementsByClassName("logo");
for (var i = myElements.length - 1; i >= 0; i--) {
var logos = new Vivus(myElements[i], {
type: 'delayed',
duration: 1500
}, function () {
$('.path1').attr('style', 'fill:white');
logos.reset();
logos.play();
});
}
});
