Create Custom Social Buttons Using Bootstrap 4 – bootstrap-social

Category: CSS & CSS3 , Social Media | February 20, 2019

0 Comment

Demo Download

AUTHOR:	abouet
VIEWS TOTAL:	5,133 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	February 20, 2019
LICENSE:	MIT

---

Preview:

Description:

A CSS extension for Bootstrap 4 that lets you create pretty nice and fully configurable social network buttons on the webpage.

Supported Social Networks:

• Adn
• Bitbucket
• Discord
• Dropbox
• Facebook
• Flickr
• Foursquar
• Github
• Google
• Instagram
• Linkedin
• Microsoft
• Odnoklassniki
• Openid
• Pinterest
• Reddit
• Soundcloud
• Tumblr
• Twitter
• Viadeo
• Vimeo
• Vk
• Yahoo

How to use it:

Download and include the bootstrap-social.css after Bootstrap’s stylesheet.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bootstrap-social.css">

Add btn-social and btn-socialName classes to the Bootstrap buttons and done.

<a class="btn btn-social btn-facebook">
  <i class="fab fa-facebook-f"></i>
  Facebook
</a>

<a class="btn btn-social btn-google">
  <img src="btn_google.svg">
  Login via Google
</a>

Show social icons only. In this example, we’re going to use Font Awesome for social icons.

<a class="btn btn-social-icon btn-facebook">
  <i class="fab fa-facebook-f"></i>
</a>