JSFiddle - React, Tailwind, and code Playground

by renegade

HTML

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

<body>
    <div>
        <section>
            <article>
                <h1>SHA</h1>
            </article>
            <article>
                <h2>Facebook</h2>
                <h2>Twitter</h2>
            </article>
        </section>
        <section>
            <article>
                <h1>ARE</h1>
            </article>
            <article>
                <h2>Stumble</h2>
                <h2>Dribbble</h2>
            </article>
        </section>
    </div>
</body>
</html>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #003961;
}

div {
    width: 400px;
    height: 80px;
    margin: 200px auto;
}

div section {
    width: 50%;
    height: 80px;
    float: left;
}

div section:first-child:before {
    background: rgba(0,0,0,0.4);
    content: '';
    position: absolute;
    height: 50px;
    width: 170px;
    margin-left: 120px;
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

div section h1 {
    margin-top: 12px;
    overflow: hidden;
    width: 33px;
    color: #fff;
}

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

div 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;
}

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

div section:last-child article h2:nth-child(1) {
    background-position: -80px 0;
}

div section:last-child article h2:nth-child(2) {
    background-position: -120px 0;
}

div section:first-child article:first-child {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

div section:first-child article:first-child h1 {
    float: right;
    font-weight: 400;
    font-size: 20px;
}

div section:last-child article:first-child {
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

div section:last-child...