social.scss

.social {
    li {
        display: inline-block;
        line-height: 40px;

        &:first-child {
          margin: 0 10px 0 0;
        }
    }

    span {
        @extend %ir;
    }

    a {
        border: 2px solid;
        border-radius: 50%;
        color: $white;
        display: block;
        font-size: 22px;
        height: 40px;
        text-align: center;
        width: 40px;
    }

    .facebook {
        @include icon-before($fa-var-facebook);
        background: $facebook-blue;
    }

    .twitter {
        @include icon-before($fa-var-twitter);
        background: $twitter-blue;
    }
}

.social-btn {
    color: $white;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 20px 0 60px;
    position: relative;

    &:first-of-type {
        margin-right: 20px;
    }

    &:last-of-type {
        margin-right: 0;
    }

    &:before {
        content: '';
        height: 40px;
        font-size: 24px;
        line-height: 40px;
        left: 0;
        position: absolute;
        top: 5px;
        width: 40px;
    }

    &-facebook {
        @include icon-before($fa-var-facebook);
        background: linear-gradient($facebook-blue, darken($facebook-blue, 10%));

        &:before {
            border-right: 1px solid darken($facebook-blue, 20%);
        }
    }

    &-twitter {
        @include icon-before($fa-var-twitter);
        background: linear-gradient($twitter-blue, darken($twitter-blue, 10%));

        &:before {
            border-right: 1px solid darken($twitter-blue, 20%);
        }
    }
}