Social Sharing Buttons using Pure.css and Font Awesome

Pure.css or Pure, is a free and open source project by Yahoo. Pure consists of a set of small, responsive CSS modules that you can use in every website or web app.In this tutorial, I’m going to show you how-to create social sharing buttons using Pure.css and Font Awesome.

Buttons HTML

To create the social sharing buttons, we will the following HTML code:

Twitter

<!-- Twitter -->
<a href="http://twitter.com/home?status=" title="Share on Twitter" target="_blank" class="pure-button button-twitter"><i class="fa fa-twitter fa-fw"></i> Twitter</a>

Facebook

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

Google+

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

StumbleUpon

<!-- StumbleUpon -->
<a href="http://www.stumbleupon.com/submit?url=" title="Share on StumbleUpon" target="_blank" class="pure-button button-stumbleupon"><i class="fa fa-stumbleupon fa-fw"></i> Stumbleupon</a>

LinkedIn

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

If you wanted to create a button for another social media website not provided in this tutorial, the HTML would be:

<!-- Custom --> 
<a href="" title="" target="_blank" class="pure-button button-custom"><i class="fa fa-custom fa-fw"></i> Custom</a>

Remember to replace custom in button-custom to the social media website’s name. You’ll also have to replace custom in fa-custom – please check Font Awesome’s website for the CSS class name you should use.

Buttons CSS

Since Pure.css has minimal styling for buttons, customizing buttons is easy. For our social sharing buttons, the CSS would be:

.button-twitter,
.button-facebook,
.button-google-plus,
.button-stumbleupon,
.button-linkedin {
  color: #fff;
}
.button-twitter {
  background: #00acee;
}
.button-facebook {
  background: #3b5998;
}
.button-google-plus {
  background: #e93f2e;
}
.button-stumbleupon {
  background: #f74425;
}
.button-linkedin {
  background: #0e76a8;
}

If you are creating a custom button for another social sharing button that isn’t a part of this tutorial, use the following CSS:

.button-custom {
  color: ;
  background: ;
}

Where custom in .button-custom, is the name of the social media website. Remember the name should match the name in the HTML code! Also, make sure you add the font color and background color.