This tutorial will show you how-to create social media sharing buttons for the Material Design Lite front-end framework using Sass and Font Awesome.Example of what we will create:

See the Pen Social Sharing Buttons using Material Design Lite, Font Awesome and Sass by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML

Adding the CSS file to your website

If you are placing the Sass generated 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>

Sass

We will simplify the Sass code by creating a list and output the CSS for each item in the list.

In the first section, we will define the variables; then in the second section, we will create a list of social networks and assign them their variables; lastly we will create a template that will generate the CSS for each social network.

//
// 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)
  }
}

If you want to add a social network that wasn’t included in the original list, just add the variable and then add the social network to the list with the variable you created for it.

You can find a list of hex codes for social networks here.