JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>3D Share Button</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div class="share">
        <section>
            <article>
                <h1>SHARE</h1>
            </article>
            <article>
                <h2>Facebook</h2>
                <h2>Twitter</h2>
            </article>
        </section>
    </div>
    
</body>
</html>

CSS

.share section h1 {
    margin-top: 12px;
    overflow: hidden;
    color: #fff;
}

.share section article {
    position: absolute;
    height: 50px;
    width: 100px;
    background: #00aeef;
    -webkit-transition: all 300ms;
    text-align: center;
}

.share section article h2 {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(http://i.imgur.com/vIIhi.png);
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 6px;
    text-indent: -9999px;
    cursor: pointer;
}

.share section article h2:nth-child(2) {
    background-position: -40px 0;
}


.share section article:first-child {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.share section article:first-child h1 {
    font-weight: 400;
    font-size: 20px;
    text-align:center
        
}


.share section article:last-child {
    background: #0f0;
   
    -webkit-transform: scale(1,0);
    background: #0082C1;
}



.share:hover section article:first-child {
    -webkit-transform: scale(0,0);
}


.share:hover section article:last-child {
    -webkit-transform:  scale(1,1);
    margin-left: 0;
    background: #0082C1;
}