Social Sharing Buttons using Pure.css, Font Awesome and Sass

Add Pure.css and Font Awesome CSS external stylesheets, and then use the following HTML and Sass code:


<!-- Twitter -->
<a href="" title="Share on Twitter" target="_blank" class="pure-button button-twitter"><i class="fa fa-twitter fa-fw"></i> Twitter</a>
 <!-- Facebook -->
<a href="" title="Share on Facebook" target="_blank" class="pure-button button-facebook"><i class="fa fa-facebook fa-fw"></i> Facebook</a>
<!-- Google+ -->
<a href="" title="Share on Google+" target="_blank" class="pure-button button-google-plus"><i class="fa fa-google-plus fa-fw"></i> Google+</a>
<!-- StumbleUpon -->
<a href="" title="Share on StumbleUpon" target="_blank" class="pure-button button-stumbleupon"><i class="fa fa-stumbleupon fa-fw"></i> Stumbleupon</a>
<!-- LinkedIn --> 
<a href="" title="Share on LinkedIn" target="_blank" class="pure-button button-linkedin"><i class="fa fa-linkedin fa-fw"></i> LinkedIn</a>

Sass CSS

// Social Sharing Buttons for Pure.css
// by Brandon Himpfen
// --------------------------------------------------

$twitter: #00acee;
$facebook: #3b5998;
$google-plus: #e93f2e;
$stumbleupon: #f74425;
$linkedin: #0e76a8;

$md-colour-list: (
twitter $twitter,
facebook $facebook,
google-plus $google-plus,
stumbleupon $stumbleupon,
linkedin $linkedin

@each $colour-name, $md-colour in $md-colour-list {
  .button-#{$colour-name} {
      color: #fff;
      background: $md-colour;
Show Comments