Social sharing buttons have become a very critical part in websites, web apps and blogs today. This is because more and more people are going online and using the Internet in a social way.Social sharing buttons are free to create and use, and provide an effective online marketing tool.

This tutorial will show you how-to create social sharing buttons using Google’s Material Design Lite and Font Awesome.

The Final Result

This is what we are trying to achieve.

See the Pen Material Design Lite: Share Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML

Adding the CSS file to your website

If you are placing the CSS in a separate file, you can add it to your website like so:

<link href="path-to-file/social-sharing.css" rel="stylesheet">

Make sure you change path-to-file with the URL path. If the file name is different from social-sharing.css, make sure you change that as well.

HTML for the buttons

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

<a href="" title="" target="_blank" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--sitename"><i class="fa fa-iconname"></i> Sitename</a>

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 -->
<a href="http://twitter.com/home?status=" title="Share on Twitter" target="_blank" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--twitter"><i class="fa fa-twitter fa-fw"></i> Twitter</a>

<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=" title="Share on Facebook" target="_blank" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--facebook"><i class="fa fa-facebook fa-fw"></i> Facebook</a>

<!-- Google+ -->
<a href="https://plus.google.com/share?url=" title="Share on Google+" target="_blank" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--googleplus"><i class="fa fa-google-plus fa-fw"></i> Google+</a>

<!-- StumbleUpon -->
<a href="http://www.stumbleupon.com/submit?url=" title="Share on StumbleUpon" target="_blank" data-placement="top" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--stumbleupon"><i class="fa fa-stumbleupon fa-fw"></i> Stumbleupon</a>

<!-- LinkedIn --> 
<a href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=" title="Share on LinkedIn" target="_blank" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--linkedin"><i class="fa fa-linkedin fa-fw"></i> LinkedIn</a>

CSS

It’s important to note we are only creating a button colour class and therefore we are not modifying any of Material Design Lite’s CSS.

.mdl-button.mdl-button--twitter {
    color: rgb(63, 81, 181)
}
.mdl-button.mdl-button--twitter:focus:not(:active) {
    background-color: #00acee
}
.mdl-button--raised.mdl-button--twitter {
    background: #00acee;
    color: rgb(255, 255, 255)
}
.mdl-button--raised.mdl-button--twitter:hover {
    background-color: #00acee
}
.mdl-button--raised.mdl-button--twitter:active {
    background-color: #00acee
}
.mdl-button--raised.mdl-button--twitter:focus:not(:active) {
    background-color: #00acee
}
.mdl-button--raised.mdl-button--twitter .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--twitter {
    background: #00acee;
    color: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--twitter:hover {
    background-color: #00acee
}
.mdl-button--fab.mdl-button--twitter:focus:not(:active) {
    background-color: #00acee
}
.mdl-button--fab.mdl-button--twitter:active {
    background-color: #00acee
}
.mdl-button--fab.mdl-button--twitter .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button.mdl-button--facebook {
    color: rgb(63, 81, 181)
}
.mdl-button.mdl-button--facebook:focus:not(:active) {
    background-color: #3b5998
}
.mdl-button--raised.mdl-button--facebook {
    background: #3b5998;
    color: rgb(255, 255, 255)
}
.mdl-button--raised.mdl-button--facebook:hover {
    background-color: #3b5998
}
.mdl-button--raised.mdl-button--facebook:active {
    background-color: #3b5998
}
.mdl-button--raised.mdl-button--facebook:focus:not(:active) {
    background-color: #3b5998
}
.mdl-button--raised.mdl-button--facebook .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--facebook {
    background: #3b5998;
    color: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--facebook:hover {
    background-color: #3b5998
}
.mdl-button--fab.mdl-button--facebook:focus:not(:active) {
    background-color: #3b5998
}
.mdl-button--fab.mdl-button--facebook:active {
    background-color: #3b5998
}
.mdl-button--fab.mdl-button--facebook .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button.mdl-button--googleplus {
    color: rgb(63, 81, 181)
}
.mdl-button.mdl-button--googleplus:focus:not(:active) {
    background-color: #e93f2e
}
.mdl-button--raised.mdl-button--googleplus {
    background: #e93f2e;
    color: rgb(255, 255, 255)
}
.mdl-button--raised.mdl-button--googleplus:hover {
    background-color: #e93f2e
}
.mdl-button--raised.mdl-button--googleplus:active {
    background-color: #e93f2e
}
.mdl-button--raised.mdl-button--googleplus:focus:not(:active) {
    background-color: #e93f2e
}
.mdl-button--raised.mdl-button--googleplus .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--googleplus {
    background: #e93f2e;
    color: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--googleplus:hover {
    background-color: #e93f2e
}
.mdl-button--fab.mdl-button--googleplus:focus:not(:active) {
    background-color: #e93f2e
}
.mdl-button--fab.mdl-button--googleplus:active {
    background-color: #e93f2e
}
.mdl-button--fab.mdl-button--googleplus .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button.mdl-button--stumbleupon {
    color: rgb(63, 81, 181)
}
.mdl-button.mdl-button--stumbleupon:focus:not(:active) {
    background-color: #f74425
}
.mdl-button--raised.mdl-button--stumbleupon {
    background: #f74425;
    color: rgb(255, 255, 255)
}
.mdl-button--raised.mdl-button--stumbleupon:hover {
    background-color: #f74425
}
.mdl-button--raised.mdl-button--stumbleupon:active {
    background-color: #f74425
}
.mdl-button--raised.mdl-button--stumbleupon:focus:not(:active) {
    background-color: #f74425
}
.mdl-button--raised.mdl-button--stumbleupon .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--stumbleupon {
    background: #f74425;
    color: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--stumbleupon:hover {
    background-color: #f74425
}
.mdl-button--fab.mdl-button--stumbleupon:focus:not(:active) {
    background-color: #f74425
}
.mdl-button--fab.mdl-button--stumbleupon:active {
    background-color: #f74425
}
.mdl-button--fab.mdl-button--stumbleupon .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button.mdl-button--linkedin {
    color: rgb(63, 81, 181)
}
.mdl-button.mdl-button--linkedin:focus:not(:active) {
    background-color: #0e76a8
}
.mdl-button--raised.mdl-button--linkedin {
    background: #0e76a8;
    color: rgb(255, 255, 255)
}
.mdl-button--raised.mdl-button--linkedin:hover {
    background-color: #0e76a8
}
.mdl-button--raised.mdl-button--linkedin:active {
    background-color: #0e76a8
}
.mdl-button--raised.mdl-button--linkedin:focus:not(:active) {
    background-color: #0e76a8
}
.mdl-button--raised.mdl-button--linkedin .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--linkedin {
    background: #0e76a8;
    color: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--linkedin:hover {
    background-color: #0e76a8
}
.mdl-button--fab.mdl-button--linkedin:focus:not(:active) {
    background-color: #0e76a8
}
.mdl-button--fab.mdl-button--linkedin:active {
    background-color: #0e76a8
}
.mdl-button--fab.mdl-button--linkedin .mdl-ripple {
    background: rgb(255, 255, 255)
}

Custom Social Sharing Button

Use the following CSS code to create a custom social sharing button. Check out Brand Colours to find the hex code of different social networks.

.mdl-button.mdl-button--sitename {
    color: rgb(63, 81, 181)
}
.mdl-button.mdl-button--sitename:focus:not(:active) {
    background-color: #<bgcolor>
}
.mdl-button--raised.mdl-button--sitename {
    background: #<bgcolor>;
    color: rgb(255, 255, 255)
}
.mdl-button--raised.mdl-button--sitename:hover {
    background-color: #<bgcolor>
}
.mdl-button--raised.mdl-button--sitename:active {
    background-color: #<bgcolor>
}
.mdl-button--raised.mdl-button--sitename:focus:not(:active) {
    background-color: #<bgcolor>
}
.mdl-button--raised.mdl-button--sitename .mdl-ripple {
    background: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--sitename {
    background: #<bgcolor>;
    color: rgb(255, 255, 255)
}
.mdl-button--fab.mdl-button--sitename:hover {
    background-color: #<bgcolor>
}
.mdl-button--fab.mdl-button--sitename:focus:not(:active) {
    background-color: #<bgcolor>
}
.mdl-button--fab.mdl-button--sitename:active {
    background-color: #<bgcolor>
}
.mdl-button--fab.mdl-button--sitename .mdl-ripple {
    background: rgb(255, 255, 255)
}

Replace sitename with the name of the social network and also replace <bgcolor> with the social network’s brand hex colour code.

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.