<div class="section">
    <ul class="social-btns">

        <li>
            <a href="javascript:void(0);" class="social-btn-flip">
                <div class="social-btn-cube">
                    <i class="social-btn-face default fa fa-lg fa-twitter twitter"></i>
                    <i class="social-btn-face active fa fa-lg fa-twitter twitter"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-flip">
                <div class="social-btn-cube">
                    <i class="social-btn-face default fa fa-lg fa-facebook facebook"></i>
                    <i class="social-btn-face active fa fa-lg fa-facebook facebook"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-flip">
                <div class="social-btn-cube">
                    <i class="social-btn-face default fa fa-lg fa-google-plus google"></i>
                    <i class="social-btn-face active fa fa-lg fa-google-plus google"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-flip">
                <div class="social-btn-cube">
                    <i class="social-btn-face default fa fa-lg fa-pinterest-p pinterest"></i>
                    <i class="social-btn-face active fa fa-lg fa-pinterest-p pinterest"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-flip">
                <div class="social-btn-cube">
                    <i class="social-btn-face default fa fa-lg fa-instagram instagram"></i>
                    <i class="social-btn-face active fa fa-lg fa-instagram instagram"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-flip">
                <div class="social-btn-cube">
                    <i class="social-btn-face default fa fa-lg fa-tumblr tumblr"></i>
                    <i class="social-btn-face active fa fa-lg fa-tumblr tumblr"></i>
                </div>
            </a>
        </li>

    </ul>
</div>

<div class="section">
    <ul class="social-btns">

        <li>
            <a href="javascript:void(0);" class="social-btn-roll twitter">
                <div class="social-btn-roll-icons">
                    <i class="social-btn-roll-icon fa fa-twitter"></i>
                    <i class="social-btn-roll-icon fa fa-twitter"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-roll facebook">
                <div class="social-btn-roll-icons">
                    <i class="social-btn-roll-icon fa fa-facebook"></i>
                    <i class="social-btn-roll-icon fa fa-facebook"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-roll google">
                <div class="social-btn-roll-icons">
                    <i class="social-btn-roll-icon fa fa-google-plus"></i>
                    <i class="social-btn-roll-icon fa fa-google-plus"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-roll pinterest">
                <div class="social-btn-roll-icons">
                    <i class="social-btn-roll-icon fa fa-pinterest-p"></i>
                    <i class="social-btn-roll-icon fa fa-pinterest-p"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-roll instagram">
                <div class="social-btn-roll-icons">
                    <i class="social-btn-roll-icon fa fa-instagram"></i>
                    <i class="social-btn-roll-icon fa fa-instagram"></i>
                </div>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-roll tumblr">
                <div class="social-btn-roll-icons">
                    <i class="social-btn-roll-icon fa fa-tumblr"></i>
                    <i class="social-btn-roll-icon fa fa-tumblr"></i>
                </div>
            </a>
        </li>

    </ul>
</div>

<div class="section">
    <ul class="social-btns">

        <li>
            <a href="javascript:void(0);" class="social-btn-press twitter">
                <i class="fa fa-twitter"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-press facebook">
                <i class="fa fa-facebook"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-press google">
                <i class="fa fa-google-plus"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-press pinterest">
                <i class="fa fa-pinterest-p"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-press instagram">
                <i class="fa fa-instagram"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-press tumblr">
                <i class="fa fa-tumblr"></i>
            </a>
        </li> 
      
    </ul>
</div>

<div class="section">
    <ul class="social-btns">

        <li>
            <a href="javascript:void(0);" class="social-btn-heart fa-stack fa-lg">
                <i class="social-btn-heart-bg fa fa-heart fa-stack-2x twitter"></i>
                <i class="social-btn-heart-icon fa fa-twitter fa-stack-1x"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-heart fa-stack fa-lg">
                <i class="social-btn-heart-bg fa fa-heart fa-stack-2x facebook"></i>
                <i class="social-btn-heart-icon fa fa-facebook fa-stack-1x"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-heart fa-stack fa-lg">
                <i class="social-btn-heart-bg fa fa-heart fa-stack-2x google"></i>
                <i class="social-btn-heart-icon fa fa-google fa-stack-1x"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-heart fa-stack fa-lg">
                <i class="social-btn-heart-bg fa fa-heart fa-stack-2x pinterest"></i>
                <i class="social-btn-heart-icon fa fa-pinterest-p fa-stack-1x"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-heart fa-stack fa-lg">
                <i class="social-btn-heart-bg fa fa-heart fa-stack-2x instagram"></i>
                <i class="social-btn-heart-icon fa fa-instagram fa-stack-1x"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-heart fa-stack fa-lg">
                <i class="social-btn-heart-bg fa fa-heart fa-stack-2x tumblr"></i>
                <i class="social-btn-heart-icon fa fa-tumblr fa-stack-1x"></i>
            </a>
        </li>      
      
    </ul>
</div>

<div class="section">
    <ul class="social-btns">

        <li>
            <a href="javascript:void(0);" class="social-btn-dissolve twitter">
                <i class="fa fa-twitter"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-dissolve facebook">
                <i class="fa fa-facebook"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-dissolve google">
                <i class="fa fa-google"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-dissolve pinterest">
                <i class="fa fa-pinterest-p"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-dissolve instagram">
                <i class="fa fa-instagram"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-dissolve tumblr">
                <i class="fa fa-tumblr"></i>
            </a>
        </li>      
      
    </ul>
</div>

<div class="section">
    <ul class="social-btns">

        <li>
            <a href="javascript:void(0);" class="social-btn-part twitter">
                <i class="fa fa-lg fa-twitter"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-part facebook">
                <i class="fa fa-lg fa-facebook"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-part google">
                <i class="fa fa-lg fa-google"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-part pinterest">
                <i class="fa fa-lg fa-pinterest-p"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-part instagram">
                <i class="fa fa-lg fa-instagram"></i>
            </a>
        </li>

        <li>
            <a href="javascript:void(0);" class="social-btn-part tumblr">
                <i class="fa fa-lg fa-tumblr"></i>
            </a>
        </li>

    </ul>
</div>

/* Buttons */
.social-btns {
    text-align: center;
}

.social-btns li {
    margin: 8px;
    display: inline-block;
    vertical-align: top;
}

@media (min-width: 768px) {

    .social-btns li {
        margin: 15px;
    }
}

/* Flip Button */
.social-btn-flip {
    display: inline-block;
    -webkit-perspective: 700;
    perspective: 700;
}

.social-btn-flip:hover .social-btn-cube {
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

.social-btn-cube {
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    -webkit-transform-origin: 20px 20px -20px;
    transform-origin: 20px 20px -20px;
}

.social-btn-face {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    line-height: 40px;
    text-align: center;
    -webkit-transform-origin: 0;
    transform-origin: 0;
}

.social-btn-face.default {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.social-btn-face.active {
    box-shadow: inset 40px 40px 0 rgba(0, 0, 0, 0.1);
    left: 40px;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.social-btn-face.twitter {
    background: #4cc4f2;
}

.social-btn-face.facebook {
    background: #3b5998;
}

.social-btn-face.google {
    background: #dd4b39;
}

.social-btn-face.pinterest {
    background: #cb2027;
}

.social-btn-face.instagram {
    background: #9b6954;
}

.social-btn-face.tumblr {
    background: #32506d;
}

/* Roll Button */
.social-btn-roll {
    background: #fff;
    width: 40px;
    height: 40px;
    border: 1px solid #3b5998;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
}

.social-btn-roll:hover .social-btn-roll-icons {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}

.social-btn-roll:hover .social-btn-roll-icon {
    color: #fff;
}

.social-btn-roll-icons {
    width: 200%;
    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}

.social-btn-roll-icons:after {
    content: " ";
    display: table;
    clear: both;
}

.social-btn-roll-icon {
    width: 50%;
    line-height: 40px;
    text-align: center;
    display: block;
    float: left;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

.social-btn-roll.twitter {
    border-color: #4cc4f2;
    color: #4cc4f2;
}

.social-btn-roll.twitter:hover {
    background: #4cc4f2;
}

.social-btn-roll.facebook {
    border-color: #3b5998;
    color: #3b5998;
}

.social-btn-roll.facebook:hover {
    background: #3b5998;
}

.social-btn-roll.google {
    border-color: #dd4b39;
    color: #dd4b39;
}

.social-btn-roll.google:hover {
    background: #dd4b39;
}

.social-btn-roll.pinterest {
    border-color: #cb2027;
    color: #cb2027;
}

.social-btn-roll.pinterest:hover {
    background: #cb2027;
}

.social-btn-roll.instagram {
    border-color: #9b6954;
    color: #9b6954;
}

.social-btn-roll.instagram:hover {
    background: #9b6954;
}

.social-btn-roll.tumblr {
    border-color: #32506d;
    color: #32506d;
}

.social-btn-roll.tumblr:hover {
    background: #32506d;
}

/* Press Button */
.social-btn-press {
    width: 40px;
    margin-right: 6px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    display: block;
    position: relative;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.social-btn-press:before,
.social-btn-press:after {
    content: " ";
    position: absolute;
    -webkit-transform-origin: top;
    transform-origin: top;
}

.social-btn-press:after {
    background: inherit;
    width: 40px;
    height: 6px;
    box-shadow: inset 40px 6px 0 rgba(0, 0, 0, 0.4);
    bottom: -6px;
    left: 0;
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
}

.social-btn-press:before {
    background: inherit;
    width: 6px;
    height: 40px;
    box-shadow: inset 6px 40px 0 rgba(0, 0, 0, 0.2);
    top: 3px;
    right: -6px;
    -webkit-transform: skewY(45deg);
    transform: skewY(45deg);
}

.social-btn-press:hover {
    top: 2px;
    left: 2px;
    color: #fff;
}

.social-btn-press:hover:after {
    height: 4px;
    bottom: -4px;
}

.social-btn-press:hover:before {
    top: 2px;
    width: 4px;
    right: -4px;
}

.social-btn-press.twitter {
    background: #4cc4f2;
}

.social-btn-press.facebook {
    background: #3b5998;
}

.social-btn-press.google {
    background: #dd4b39;
}

.social-btn-press.pinterest {
    background: #cb2027;
}

.social-btn-press.instagram {
    background: #9b6954;
}

.social-btn-press.tumblr {
    background: #32506d;
}

/* Heart Beat Button */
.social-btn-heart:hover .social-btn-heart-bg {
    -webkit-animation: beat 2s infinite;
    animation: beat 2s infinite;
}

.social-btn-heart-icon {
    font-size: 16px;
    color: #fff;
}

.social-btn-heart:hover .social-btn-heart-icon {
    color: #fff;
}

@-webkit-keyframes beat {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    20% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    60% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes beat {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    20% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    60% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.social-btn-heart-bg.twitter {
    color: #4cc4f2;
}

.social-btn-heart-bg.facebook {
    color: #3b5998;
}

.social-btn-heart-bg.google {
    color: #dd4b39;
}

.social-btn-heart-bg.pinterest {
    color: #cb2027;
}

.social-btn-heart-bg.instagram {
    color: #9b6954;
}

.social-btn-heart-bg.tumblr {
    color: #32506d;
}

/* Dissolve Button */
.social-btn-dissolve {
    width: 42px;
    height: 42px;
    text-align: center;
    color: #fff;
    line-height: 42px;
    border-radius: 50%;
    display: block;
    position: relative;
}

.social-btn-dissolve:hover {
    color: #fff;
}

.social-btn-dissolve:hover:before {
    opacity: 0;
    -webkit-transform: scale(1.35);
    transform: scale(1.35);
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.social-btn-dissolve:before {
    background: inherit;
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.75;
    border-radius: 50%;
    -webkit-transition: none;
    transition: none;
}

.social-btn-dissolve.twitter {
    background: #4cc4f2;
}

.social-btn-dissolve.facebook {
    background: #3b5998;
}

.social-btn-dissolve.google {
    background: #dd4b39;
}

.social-btn-dissolve.pinterest {
    background: #cb2027;
}

.social-btn-dissolve.instagram {
    background: #9b6954;
}

.social-btn-dissolve.tumblr {
    background: #32506d;
}

/* Parting Button */
.social-btn-part {
    width: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    display: block;
    position: relative;
}

.social-btn-part:after,
.social-btn-part:before {
    content: " ";
    background: rgba(255, 255, 255, 0.3);
    width: 100%;
    position: absolute;
    left: 0;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.social-btn-part:after {
    top: 0;
    bottom: 50%;
}

.social-btn-part:before {
    top: 50%;
    bottom: 0;
}

.social-btn-part:hover {
    color: #fff;
}

.social-btn-part:hover:after {
    bottom: 100%;
}

.social-btn-part:hover:before {
    top: 100%;
}

.social-btn-part.twitter {
    background: #4cc4f2;
}

.social-btn-part.facebook {
    background: #3b5998;
}

.social-btn-part.google {
    background: #dd4b39;
}

.social-btn-part.pinterest {
    background: #cb2027;
}

.social-btn-part.instagram {
    background: #9b6954;
}

.social-btn-part.tumblr {
    background: #32506d;
}

/* Sections */
.section {
    background: #f5f4f4;
    border-bottom: 5px solid #fff;
    padding: 5% 15px;
    position: relative;
}

@media (min-width: 768px) {

    .section {
        padding-left: 40px;
        padding-right: 40px;
    }
}