Facebook and Twitter shares buttons (based on Bootstrap)

_buttons-bootstrap.scss

/* ==|====================
   Vendor override/Bootstrap/Buttons
   ======================= */

/* =Sizes
---------------------- */

.btn-xlg {
  font-size: 20px;
  padding: 14px 32px;
  line-height: 1.33333;
  border-radius: 6px;
}


/* =Icons
---------------------- */

.btn-icon-left {
  position: relative;
  padding-left: 63px !important;
  padding-right: 10px !important;

  i {
    position: absolute;
    left: 14px;
    top: 0;
    width: 35px;
    font-size: 27px;
    border-right: solid 1px rgba(0, 0, 0, 0.1);
    padding-right: 12px;
    line-height: 54px;
    height: 100%;
  }

  @media (min-width: $screen-sm-min) {
    padding-left: 83px !important;
    padding-right: 20px !important;

    i {
      left: 18px;
      top: 0;
      width: 43px;
      font-size: 23px;
      padding-right: 14px;
      line-height: 49px;
    }
  }

  &.small {
    padding-right: 20px !important;

    i {
      line-height: 45px;
      font-size: 20px;
    }

    @media (max-width: $screen-xs-max) {
      padding-right: 10px !important;
      padding-left: 53px !important;

      i {
        width: 29px;
      }
    }
  }
}

.btn-icon-right {
  i {
    margin-left: 20px;
  }
}


/* =Colors
---------------------- */

$facebook-color: #44619d;
$twitter-color: #01c2e1;
$googleplus-color: #d95232;

.btn-facebook {
  @include button-variant(#fff, $facebook-color, $facebook-color);
}

.btn-twitter {
  @include button-variant(#fff, $twitter-color, $twitter-color);
}

.btn-googleplus {
  @include button-variant(#fff, $googleplus-color, $googleplus-color);
}