Revealing Buttons

Based on work by Jonathan Sampson ‏@jonathansampson

by rdillman

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.js"></script>
<div class="share">
    <input type="radio" name="networks" id="social-fb" class="social-fb" />
    <input type="radio" name="networks" id="social-tw" class="social-tw" />
    <input type="radio" name="networks" id="social-in" class="social-in" />
    <input type="radio" name="networks" id="social-g" class="social-g" />
    <input type="radio" name="networks" id="social-y" class="social-y" />
    <input type="submit" value="Do it!" />
    <ul class="networks">
        <label for="social-fb" class="rollIn">FB</label>
        <label for="social-tw" class="rollIn">TW</label>
        <label for="social-in" class="rollIn">in</label>
        <label for="social-g" class="rollIn">G+</label>
        <label for="social-y" class="rollIn">Y!</label>
    </ul>
    
</div>
<textarea></textarea>

CSS

.share {
    width: 150px;
    margin-left: 3em;
    display: inline-block;
}
.networks {
    position: relative;
    margin: 3em 3em 3em 0;
    padding: 0;
    width: 4.5em;
    height: 4.5em;
    z-index:2;
}
.networks::after {
    display: block;
    content:'share';
    border-radius: 50%;
    text-align: center;
    color: rgba(0, 0, 0, .85);
    width: 3em;
    height: 3em;
    line-height: 3em;
    font-size: 1.5em;
    font-family:'Segoe UI';
    background-color: #f1f1f1;
    text-shadow: 0 1px 0 white;
    box-shadow: 0 2.5em 5em rgba(0, 0, 0, .5);
}
.networks label {
    color: #333;
    left: 1.75em;
    top: 1.75em;
    list-style: none;
    background: black;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    font: .75em/2.5em'Segoe UI';
    box-shadow: 0 2.5em 5em rgba(0, 0, 0, .5);
    transition: all .5s ease-out;
    opacity: 0;
    z-index:-1;
}
.networks:hover {
    cursor: pointer
}
.share:hover label {
    color: #FFF;
    opacity: 1;
    cursor: pointer;
}
.share:hover label:nth-child(1), .share:hover label:nth-child(4) {
    left: 4.25em;
}
.share:hover label:nth-child(2), .share:hover label:nth-child(3) {
    left: 7em;
}
.share:hover label:nth-child(5) {
    left: 10em;
}
.share:hover label:nth-child(1) {
    top: -2.5em;
    background-color: #3B5998;
}
.share:hover label:nth-child(2) {
    top: 0;
    background-color: #009DCD;
}
.share:hover label:nth-child(3) {
    top: 3.5em;
    background-color: #0073B2;
}
.share:hover label:nth-child(4) {
    top: 6em;
    background-color: #D84735;
}
.share:hover label:nth-child(5) {
    top: 1.75em;
    background-color: #7B0097;
}
.share label, .networks:after, .networks:after {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .50), transparent);
}
input[type=radio] {
    position:absolute;
    left:-9999px;
}
.social-fb:checked ~ .networks:after {
    content:'FB';
    color: #fff;
    background-color:...