.btn-social {
    height: 42px;
    width: 50px;
    padding: 6px;
    margin-top: 38px;
    position: relative;
}

.btn-social > .social-counter {
    top: -40px;
    left: 0;
    padding-top: 4px;
    height: 30px;
    width: 50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: absolute;
}

.btn-social > .social-counter:before,
.btn-social > .social-counter:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.btn-social > .social-counter:before {
    border-top-color: #ccc;
    border-width: 6px;
    margin-left: -6px;
}

.btn-social > .social-counter:after {
    border-top-color: #ffffff;
    border-width: 5px;
    margin-left: -5px;
}

.social-counter a {
    color: #333;
}

.social-counter a:hover,
.social-counter a:focus {
    color: #777;
    text-decoration: none;
}

.btn-facebook { color: #fff; background-color: #3b5998; border-color: rgba(0,0,0,0.2); }
.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active { color: #fff; background-color:#2d4373; border-color: rgba(0,0,0,0.2); }

.btn-twitter { color: #fff; background-color: #55acee; border-color: rgba(0,0,0,0.2); }
.btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active { color:#fff; background-color:#2795e9; border-color:rgba(0,0,0,0.2); }

.btn-google-plus { color: #fff; background-color: #dd4b39; border-color: rgba(0,0,0,0.2); }
.btn-google-plus:hover, .btn-google-plus:focus, .btn-google-plus:active { color: #fff; background-color: #c23321; border-color: rgba(0,0,0,0.2); }