Social sharing buttons have become a very important part in websites today, as more and more people are going online and using online in a social way. Social sharing buttons are free to create and use, and an effective online marketing tool.This tutorial will show you how-to create social sharing buttons using the Twitter Bootstrap front-end framework and Font Awesome – which we’ll use to create the icons.

This tutorial assumes that your website is already using Bootstrap and Font Awesome.

The Final Result

This is what we are trying to achieve.

* Twitter * Facebook * Google+ * Stumbleupon ** LinkedIn

HTML

You can add the CSS file to your website using the following HTML:

Make sure you change path-to-file with the URL path.

For each social sharing button, the HTML would look like this:

Sitesame

Where sitename is the name of the social sharing website and iconname is the name of the Font Awesome icon.

Since we are creating social sharing buttons for Twitter, Facebook, Google+, StumbleUpon and LinkedIn, the HTML for the buttons would be:

Twitter Facebook Google+ Stumbleupon LinkedIn

Adding Bootstrap Button Classes

The CSS we will be creating does not touch or interfere with the sizing classes of Bootstrap, so you can make your buttons small or large. You can read more here.

CSS

Create a file named social-sharing.css and add the following content to it:

.btn-twitter { background: #00acee; border-radius: 0; color: #fff } .btn-twitter:link, .btn-twitter:visited { color: #fff } .btn-twitter:active, .btn-twitter:hover { background: #0087bd; color: #fff } .btn-facebook { background: #3b5998; border-radius: 0; color: #fff } .btn-facebook:link, .btn-facebook:visited { color: #fff } .btn-facebook:active, .btn-facebook:hover { background: #30477a; color: #fff } .btn-googleplus { background: #e93f2e; border-radius: 0; color: #fff } .btn-googleplus:link, .btn-googleplus:visited { color: #fff } .btn-googleplus:active, .btn-googleplus:hover { background: #ba3225; color: #fff } .btn-stumbleupon { background: #f74425; border-radius: 0; color: #fff } .btn-stumbleupon:link, .btn-stumbleupon:visited { color: #fff } .btn-stumbleupon:active, .btn-stumbleupon:hover { background: #c7371e; color: #fff } .btn-linkedin { background: #0e76a8; border-radius: 0; color: #fff } .btn-linkedin:link, .btn-linkedin:visited { color: #fff } .btn-linkedin:active, .btn-linkedin:hover { background: #0b6087; color: #fff }

The above CSS will allow you to create buttons for Twitter, Facebook, Google+, StumbleUpon and LinkedIn. If you want to create a social sharing button for another social media website, simply modify the following, by replacing the name and colours:

.btn-sitename { background-color: #000; border-radius: 0; color: #fff } .btn-sitename:link, .btn-sitename:visited { color: #fff } .btn-sitename:active, .btn-sitename:hover { background-color: #000; color: #fff }

You’ll see .btn-sitename, replace sitename with the social media website name. Afterwards, change the background-color and color (colour of the text) to what you want. If you want to find the brand colour of the social media website, you can use Brand Colours.

By default, the border will have no radius. You can change this by adjusting the border-radius property.

Font Awesome Icon CSS

If you wish to modify the Font Awesome icon using CSS, you can do that in two (2) ways: all of them or each one.

.fa { // Add CSS here to target all buttons } .fa-sitename { // Add CSS here to target individual buttons }

Remember to replace sitename with the name of the social sharing website.