<link href="style.css" rel="stylesheet"><a class="social" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-facebook"></i></div><div class="back"><i class="fa fa-facebook"></i></div>
</a><a class="social social-twitter" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-twitter"></i></div><div class="back"><i class="fa fa-twitter"></i></div>
</a><a class="social social-github" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-github"></i></div><div class="back"><i class="fa fa-github"></i></div>
</a><a class="social social-pinterest" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-pinterest"></i></div><div class="back"><i class="fa fa-pinterest"></i></div>
</a><a class="social social-googleplus" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-google-plus"></i></div><div class="back"><i class="fa fa-google-plus"></i></div>
</a><a class="social social-skype" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-skype"></i></div><div class="back"><i class="fa fa-skype"></i></div>
</a><a class="social social-linkedin" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-linkedin"></i></div><div class="back"><i class="fa fa-linkedin"></i></div>
</a><a class="social social-skype" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-skype"></i></div><div class="back"><i class="fa fa-skype"></i></div>
</a><a class="social social-dribbble" href="https://webbb.be" target="_blank"><div class="front"><i class="fa fa-dribbble"></i></div><div class="back"><i class="fa fa-dribbble"></i></div>
</a>

/*** CSS3 social icon hover effect* Read more on my blog: http://webbb.be/blog/*/body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;
}
a,a:visited { color: #fff; }
a:hover { color: #fff; }.social {float: left;margin: 2em 2em; width: 100px; height: 100px;     display: block; text-align: center; line-height:103px; color: #fff;position: relative;transform:rotateY(0deg);transition:transform .25s ease-out;transform-style:preserve-3d;
}
.social > div {width: 100px; height: 100px; background: #000;position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.social >.front {transform:translateZ(40px);
}
.social >.back {background: #3B5998; font-size: 3em;transform:rotateY(-100deg) translateZ(40px);
}/*  Social Media Colors Facebook #3B5998Flickr #FE0883Foursquare #8FD400Google+ #C63D2DInstagram #4E433CLinkedin #4875B4Tumblr #2B4964Twitter #33CCFFVimeo #86B32DYoutube #FF3333Dribbble #ea4c89
*/
.social.social-twitter > .back { background: #55ACEE; }
.social.social-github > .back { background: #f3f3f3; color: #000; }
.social.social-pinterest > .back { background: #e3262e; }
.social.social-googleplus > .back { background: #dd4B39; }
.social.social-skype > .back { background: #12A5F4; }
.social.social-linkedin > .back { background: #4875B4; }
.social.social-dribbble > .back { background: #ea4c89; }/* Hover */
.social:hover {transform: rotateY(100deg);
}