Social Sharing Buttons using Material Design Lite, Font Awesome and Sass

Create social sharing buttons for Material Design Lite using Font Awesome and Sass.

HTML

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

Sass

//
// Social Sharing Buttons for Material Design Lite
// by Brandon Himpfen http://www.himpfen.com/
// --------------------------------------------------

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

$md-colour-list: (
twitter $twitter,
facebook $facebook,
googleplus $googleplus,
stumbleupon $stumbleupon,
linkedin $linkedin
);

@each $colour-name, $md-colour in $md-colour-list {
  .mdl-button.mdl-button--#{$colour-name} {
      color: rgb(63, 81, 181)
  }
  .mdl-button.mdl-button--#{$colour-name}:focus:not(:active) {
      background-color: $md-colour
  }
  .mdl-button--raised.mdl-button--#{$colour-name} {
      background: $md-colour;
      color: rgb(255, 255, 255)
  }
  .mdl-button--raised.mdl-button--#{$colour-name}:hover {
      background-color: $md-colour
  }
  .mdl-button--raised.mdl-button--#{$colour-name}:active {
      background-color: $md-colour
  }
  .mdl-button--raised.mdl-button--#{$colour-name}:focus:not(:active) {
      background-color: $md-colour
  }
  .mdl-button--raised.mdl-button--#{$colour-name} .mdl-ripple {
      background: rgb(255, 255, 255)
  }
  .mdl-button--fab.mdl-button--#{$colour-name} {
      background: $md-colour;
      color: rgb(255, 255, 255)
  }
  .mdl-button--fab.mdl-button--#{$colour-name}:hover {
      background-color: $md-colour
  }
  .mdl-button--fab.mdl-button--#{$colour-name}:focus:not(:active) {
      background-color: $md-colour
  }
  .mdl-button--fab.mdl-button--#{$colour-name}:active {
      background-color: $md-colour
  }
  .mdl-button--fab.mdl-button--#{$colour-name} .mdl-ripple {
      background: rgb(255, 255, 255)
  }
}
Show Comments

Get the latest posts delivered right to your inbox.