JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="container">
    <div class="socialbutton" id="facebook">
        <div class="top panel">
            <svg width="100%" height="100%" viewBox="0 0 20 20">
                <path id="fb_a" d="M13.9,5.4h-2.2c-0.3,0-0.6,0.3-0.6,0.8v1.6h2.8v2.3h-2.8V17H8.5v-6.9H6.1v-2.3h2.4v-1.3   c0-1.9,1.3-3.5,3.2-3.5h2.2V5.4z" style="fill:#ffffff;stroke:none;"/>
            </svg>
        </div>
        <div class="front panel">
            <svg width="100%" height="100%" viewBox="0 0 20 20">
                <path id="fb_ina" d="M13.9,5.4h-2.2c-0.3,0-0.6,0.3-0.6,0.8v1.6h2.8v2.3h-2.8V17H8.5v-6.9H6.1V7.8h2.4V6.5C8.5,4.6,9.8,3,11.7,3   h2.2V5.4z" style="fill:#43435E;stroke:none"/>
            </svg>
        </div>
    </div>
    <div class="socialbutton" id="twitter">
        <div class="top panel">
            <svg width="100%" height="100%" viewBox="0 0 20 20">
                <path id="tw_a" d="M13.4,13.5h-2.7c-1.9,0-2.2-0.9-2.2-1.6c0-0.4,0-1,0-1.7H13c0.7,0,2-0.3,2-1.5c0-1.2-0.6-2-1.4-2h-5   c0-1.8-0.1-3.6-1.9-3.6c-0.7,0-1.3,0.3-1.5,1c-0.3,1-0.2,2.1-0.2,3.1c0,0.2,0,0.4,0,0.6c0,0.7,0,1.3,0,2c0,0.7,0,1.4,0,2.1   c0,4,3.6,5.1,4.3,5.1c0.7,0,3.4,0.1,3.9,0.1c0.5,0,1.9-0.1,1.9-1.6C15.1,14,14.1,13.5,13.4,13.5z" style="fill:#ffffff;stroke:none;"/>
            </svg>
        </div>
        <div class="front panel">
            <svg width="100%" height="100%" viewBox="0 0 20 20">
                <path id="tw_ina" d="M13.4,13.5h-2.7 c-1.9,0-2.2-0.9-2.2-1.6 c0-0.4,0-1,0-1.7 H13 c0.7,0,2-0.3,2-1.5 c0-1.2-0.6-2-1.4-2 h-5 c0-1.8-0.1-3.6-1.9-3.6 c-0.7,0-1.3,0.3-1.5,1 c-0.3,1-0.2,2.1-0.2,3.1 c0,0.2,0,0.4,0,0.6 c0,0.7,0,1.3,0,2 c0,0.7,0,1.4,0,2.1   c0,4,3.6,5.1,4.3,5.1 c0.7,0,3.4,0.1,3.9,0.1 c0.5,0,1.9-0.1,1.9-1.6 C15.1,14,14.1,13.5,13.4,13.5z" style="fill:#43435E;stroke:none"/>
            </svg>
        </div>
    </div>
    <div class="socialbutton" id="gplus">
        <div class="top panel">
            <svg width="100%" height="100%" viewBox="0 0 20 20">
                <path...

CSS

body{
    background:#ccc;
}
.container{
    margin:100px 0 0 100px;
    background:white;
    position:relative;
    width:140px;
    height:30px;
}
/* general definitions */
.socialbutton{
    width:24px;
    height:24px;
    margin:3px 0px 3px 0px;
    position:relative;
    background:white;
    display:inline-block;
    perspective:1000px;
    perspective-origin:-350px 50%;
    -webkit-perspective:1000px;
    -webkit-perspective-origin:-350px 50%;
}
.panel{
    width:20px;
    height:20px;
    position:absolute;
    margin:2px;
    transform-origin:50% 50% 10px;
    transition:transform 200ms linear;
    -webkit-transform-origin:50% 50% 10px;
    -webkit-transition:-webkit-transform 200ms linear;
    /*border:1px solid black;*/
}
.socialbutton:hover .panel{
    transition:transform 200ms cubic-bezier(.75,1.2,.75,1.2);
    -webkit-transition:-webkit-transform 200ms cubic-bezier(.75,1.2,.75,1.2);
}
.top.panel{
    border-radius:3px;
    border:0px solid rgba(0,0,0,0);
    transform:rotatex(-91deg);
    -webkit-transform:rotatex(-91deg);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.front.panel{
    transform:rotatex(0deg);
    -webkit-transform:rotatex(0deg);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.socialbutton:hover .top.panel{
    transform:rotatex(0deg);
    -webkit-transform:rotatex(0deg);
}
.socialbutton:hover .front.panel{
    /*transform:rotatex(90deg);
    -webkit-transform:rotatex(90deg);*/
}
/* specific sites */
#facebook .top{
    background:#3b5998;
}
#twitter .top{
    background:#00aced;
}
#gplus .top{
    background:#dd4b39;
}
#pinterest .top{
    background:#cb2027;
}
#email .top{
    background:#818c93;
}