Social Buttons

Social Buttons

Copy
<section class="py-7">
  <div class="container">
    <div class="row justify-space-between text-center py-2">
      <div class="col-12 mx-auto">
        <button type="button" class="btn-icon btn btn-facebook">
          <span class="btn-inner--icon mr-1"><i class="fab fa-facebook"></i></span>
          <span class="btn-inner--text">Facebook</span>
        </button>
        <button type="button" class="btn-icon btn btn-twitter">
          <span class="btn-inner--icon mr-1"><i class="fab fa-twitter"></i></span>
          <span class="btn-inner--text">Twitter</span>
        </button>
        <button type="button" class="btn-instagram btn-icon btn">
          <span class="btn-inner--icon mr-1"><i class="fab fa-instagram"></i></span>
          <span class="btn-inner--text">Instagram</span>
        </button>
        <button type="button" class="btn-github btn-icon btn">
          <span class="btn-inner--icon mr-1"><i class="fab fa-github"></i></span>
          <span class="btn-inner--text">Github</span>
        </button>
        <button type="button" class="btn-icon btn btn-pinterest">
          <span class="btn-inner--icon mr-1"><i class="fab fa-pinterest"></i></span>
          <span class="btn-inner--text">Pinterest</span>
        </button>
        <button type="button" class="btn-icon btn btn-youtube">
          <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
          <span class="btn-inner--text">Youtube</span>
        </button>
        <button type="button" class="btn btn-vimeo btn-icon">
          <span class="btn-inner--icon mr-1"><i class="fab fa-vimeo-v"></i></span>
          <span class="btn-inner--text">Vimeo</span>
        </button>
        <button type="button" class="btn-slack btn btn-icon">
          <span class="btn-inner--icon mr-1"><i class="fab fa-slack"></i></span>
          <span class="btn-inner--text">Slack</span>
        </button>
        <button type="button" class="btn-icon btn btn-dribbble">
          <span class="btn-inner--icon mr-1"><i class="fab fa-dribbble"></i></span>
          <span class="btn-inner--text">Dribbble</span>
        </button>
        <button type="button" class="btn-icon btn btn-reddit">
          <span class="btn-inner--icon mr-1"><i class="fab fa-reddit"></i></span>
          <span class="btn-inner--text">Reddit</span>
        </button>
        <button type="button" class="btn-icon btn btn-tumblr">
          <span class="btn-inner--icon mr-1"><i class="fab fa-tumblr"></i></span>
          <span class="btn-inner--text">Tumblr</span>
        </button>
        <button type="button" class="btn-icon btn btn-linkedin">
          <span class="btn-inner--icon mr-1"><i class="fab fa-linkedin"></i></span>
          <span class="btn-inner--text">LinkedIn</span>
        </button>
      </div>
    </div>
  </div>
</section>

Social Buttons Icon Only

Copy
<section class="py-7 mt-3">
  <div class="container">
    <div class="row justify-space-between text-center py-2">
      <div class="col-12 mx-auto">
        <button type="button" class="btn btn-icon-only btn-facebook">
          <span class="btn-inner--icon mr-1"><i class="fab fa-facebook"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-twitter">
          <span class="btn-inner--icon mr-1"><i class="fab fa-twitter"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-instagram">
          <span class="btn-inner--icon mr-1"><i class="fab fa-instagram"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-github">
          <span class="btn-inner--icon mr-1"><i class="fab fa-github"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-pinterest">
          <span class="btn-inner--icon mr-1"><i class="fab fa-pinterest"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-youtube">
          <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-vimeo">
          <span class="btn-inner--icon mr-1"><i class="fab fa-vimeo-v"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-slack">
          <span class="btn-inner--icon mr-1"><i class="fab fa-slack"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-dribbble">
          <span class="btn-inner--icon mr-1"><i class="fab fa-dribbble"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-reddit">
          <span class="btn-inner--icon mr-1"><i class="fab fa-reddit"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-tumblr">
          <span class="btn-inner--icon mr-1"><i class="fab fa-tumblr"></i></span>
        </button>
        <button type="button" class="btn btn-icon-only btn-linkedin">
          <span class="btn-inner--icon mr-1"><i class="fab fa-linkedin"></i></span>
        </button>
      </div>
    </div>
  </div>
</section>