<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:; left:; right:; bottom:;

}

.social >.front {

    transform:translateZ(40px);

}

.social >.back {

    background: #3B5998; font-size: 3em;

    transform:rotateY(-100deg) translateZ(40px);

}

/*  Social Media Colors

    Facebook #3B5998

    Flickr #FE0883

    Foursquare #8FD400

    Google+ #C63D2D

    Instagram #4E433C

    Linkedin #4875B4

    Tumblr #2B4964

    Twitter #33CCFF

    Vimeo #86B32D

    Youtube #FF3333

    Dribbble #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);

}