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:

HTML

<!-- Twitter -->
<a href="https://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 -->
<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+ -->
<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 -->
<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 --> 
<a href="https://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>

Sass CSS

//
// Social Sharing Buttons for Pure.css
// by Brandon Himpfen http://www.himpfen.com/
// --------------------------------------------------

$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