Back to Top

How to create Social Sharing Buttons with Bootstrap


You all who have blog or site are using social media icons to promote your information, page or website to social networking sites.In this article, I am going to share the ready to use solution with how you can create your own fast and beautiful social sharing button.To take the benefits and allow users to share your links in social networks is necessary. However, you need to sacrifice performance and seriously affect page loading time especially when the user is using the mobile or device which is also not desirable.

What is use of Social Sharing Buttons?

Social networking sites promotion is essential nowadays to get tremendous exposure to your content.

You want to get very easy way to set up social sharing buttons on your website. The first idea comes in mind is let’s use the plugin as it is a very easiest way to install and use. But let me clear you, sometimes plugin break your site or plugin use a javascript which might affect the speed of a website.To solve such problems, Here I come with the article which shows you how you can set up social sharing button without any plugin or any other file.

Bootstrap is the most popular framework and using it you can easily setup icons.Here, I have created the example to use the own social sharing buttons using pure CSS3 which is displayed when you click the button.These social sharing buttons uses the font awesome and bootstrap.And you just need to copy and paste the code, I will explain in the following line.

First create basic HTML structure, In this HTML code, I have to create the two buttons with some transition effect, You can change transition as per your requirement.HTML code is mainly the main div which contain share Button and other social media buttons. You can add more other social media icons/buttons if you require.

Remember, You need to replace the URL, title and media information as per your site details.

How To Create HTML code

Here is the HTML code.Let’s get start quickly with a basic structure and allows you to dive quickly into code.In this HTML code, you might need to replace URL with your specific desired one.Also, you can do some CSS changes as per your theme.

HTML is very simple and easily understandable. I have added button in the main div directly and create an another div within the main div for setting sharing icons.

Now, Let’s see the CSS code is relatively simple. Mostly you don’t need to make any change in CSS.

How to Add some CSS

Here is the CSS code used primarily set your sharing buttons. I have provided basic CSS code, but you can make changes as per your design.

.social .fbtn {
    width: 50px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 18px;
    float: left;
.social .fa {
    padding: 15px 0px
.facebook {
    background-color: #3b5998;
.gplus {
    background-color: #dd4b39;
.twitter {
    background-color: #55acee;
.stumbleupon {
    background-color: #eb4924;
.pinterest {
    background-color: #cc2127;
.linkedin {
    background-color: #0077b5;
.buffer {
    background-color: #323b43;
.share-button.sharer {
    height: 20px;
    padding: 100px;
.share-button.sharer {
    transform: scale(1) translateY(-10px);
.share-button.sharer {
    opacity: 1;
    transition: all 0.4s ease 0s;
    visibility: visible;
.share-button.sharer .social.networks-5 {} .share-button.sharer {
    margin-top: -80px;
    transform-origin: 0 0 0;
.share-button.sharer .social {
    margin-left: -65px;
    opacity: 0;
    transition: all 0.4s ease 0s;
    visibility: hidden;

In CSS, I have added color code for social icons but if you don’t want to use, you can remove CSS. Also, you can use your icons or CSS. CSS code is applying the transition effect when sharing icons display especially you click on the share button. I have applied scale and translate effect, but you can use any CSS3 effect.

After adding CSS, you need to add JavaScript code which will give the effect to show and hide the buttons on click event. You can also change the event as per your requirement. I have used the jQuery code so Make sure you have added jQuery core files to work this code as expected.

How to add JavaScript

You can add Javascript code in the head section or footer section of your HTML.

$( document ).ready(function() {
     //custom button for homepage
     $( ".share-btn" ).click(function(e) {
     	 $('.networks-5').not($(this).next( ".networks-5" )).each(function(){
         $(this).next( ".networks-5" ).toggleClass( "active" );

Above code is applying toggle effect on an active class so that class is compulsory. It is removing active class from each tag before applying toggle effect so this code will work if you are using multiple sharing buttons on one page without any conflicts.

By doing this, You will get the Sharing button very easily without any worries about site breaking.This approach emerges less code and more efficiency.You can see the demo on below code. Also, You can view working code on the homepage of a site.

The Final Output

Your turn now! I would love to hear more ideas and thoughts to improve or create social sharing buttons.Do share your creative ideas in the comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to use HTML5 ContentEditable attribute

Posted on 4 years ago


Avoid to use ENUM and SET type in MySQL

Posted on 7 years ago


Type Hinting Callable Functions in PHP

Posted on 2 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago