Facebook and Twitter Buttons (based on Foundation)

_buttons-foundation.scss

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

.button-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: 52px;
    height: 100%;
  }

  &.button-outline-white {
    i {
      border-right-color: #fff;
    }
  }

  @media #{$medium} {
    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 #{$small-only} {
      padding-right: 10px !important;
      padding-left: 53px !important;

      i {
        width: 29px;
      }
    }
  }
}

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


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

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

.button.button-facebook {
  @extend .button-icon-left;
  background-color: $facebook-color;
  margin-bottom: 0;

  .no-touch &:hover,
  .no-touch &:focus {
    background-color: darken($facebook-color, 10%);
  }
}

.button.button-twitter {
  @extend .button-icon-left;
  background-color: $twitter-color;
  margin-bottom: 0;

  .no-touch &:hover,
  .no-touch &:focus {
    background-color: darken($twitter-color, 10%);
  }
}