Let us know what you think about the new Building Blocks

Social buttons

By Harry Manchanda

F6
#
How do I use This?

Social buttons with 9 social networking site's buttons added by default.

HTML
<h4>Button tag</h4>
<div class="clearfix"></div>
<button type="button" class="button social facebook">
  <i class="fa fa-facebook" aria-hidden="true"></i> Facebook 
</button>
<button type="button" class="button social twitter">
  <i class="fa fa-twitter" aria-hidden="true"></i> Twitter 
</button>
<button type="button" class="button social linkedin">
  <i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin 
</button>
<button type="button" class="button social youtube">
  <i class="fa fa-youtube" aria-hidden="true"></i> Youtube 
</button>  
<button type="button" class="button social instagram">
  <i class="fa fa-instagram" aria-hidden="true"></i> Instagram 
</button>
<button type="button" class="button social pinterest">
  <i class="fa fa-pinterest-p" aria-hidden="true"></i> Pinterest 
</button>
<button type="button" class="button social google-plus">
  <i class="fa fa-google-plus" aria-hidden="true"></i> Google + 
</button>
<button type="button" class="button social github">
  <i class="fa fa-github" aria-hidden="true"></i> Github 
</button> 
<button type="button" class="button social tumblr">
  <i class="fa fa-tumblr" aria-hidden="true"></i> Tumblr 
</button> 
<div class="clearfix"></div>
<h4>Button as an Anchor tag</h4>
<div class="clearfix"></div>
<a href="#" class="button social facebook">
  <i class="fa fa-facebook" aria-hidden="true"></i> Facebook 
</a>
<a href="#" class="button social twitter">
  <i class="fa fa-twitter" aria-hidden="true"></i> Twitter 
</a>
<a href="#" class="button social linkedin">
  <i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin 
</a>
<a href="#" class="button social youtube">
  <i class="fa fa-youtube" aria-hidden="true"></i> Youtube 
</a>  
<a href="#" class="button social instagram">
  <i class="fa fa-instagram" aria-hidden="true"></i> Instagram 
</a>
<a href="#" class="button social pinterest">
  <i class="fa fa-pinterest-p" aria-hidden="true"></i> Pinterest 
</a>
<a href="#" class="button social google-plus">
  <i class="fa fa-google-plus" aria-hidden="true"></i> Google + 
</a>
<a href="#" class="button social github">
  <i class="fa fa-github" aria-hidden="true"></i> Github 
</a> 
<a href="#" class="button social tumblr">
  <i class="fa fa-tumblr" aria-hidden="true"></i> Tumblr 
</a> 

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-youtube: #bb0000;
$social-brand-instagram: #125688;
$social-brand-pinterest: #cb2027;
$social-brand-google-plus: #dd4b39;
$social-brand-github: #000000;
$social-brand-tumblr: #32506d;

.social {
  margin-right: .25rem;

  &.facebook {
    @include button-style($social-brand-facebook, auto, $white);
  }
  &.twitter {
    @include button-style($social-brand-twitter, auto, $white);
  }
  &.linkedin {
    @include button-style($social-brand-linkedin, auto, $white);
  }
  &.youtube {
    @include button-style($social-brand-youtube, auto, $white);
  }
  &.instagram {
    @include button-style($social-brand-instagram, auto, $white);
  }
  &.pinterest {
    @include button-style($social-brand-pinterest, auto, $white);
  }
  &.google-plus {
    @include button-style($social-brand-google-plus, auto, $white);
  }
  &.github {
    @include button-style($social-brand-github, auto, $white);
  }
  &.tumblr {
    @include button-style($social-brand-tumblr, auto, $white);
  }

  > .fa {
    color: $white;
    margin-right: .25rem;
  }
}


.social {
  margin-right: .25rem;
}

.social.facebook {
  background-color: #3b5998;
  color: #fefefe;
}

.social.facebook:hover, .social.facebook:focus {
  background-color: #2f477a;
  color: #fefefe;
}

.social.twitter {
  background-color: #55acee;
  color: #fefefe;
}

.social.twitter:hover, .social.twitter:focus {
  background-color: #1a8fe8;
  color: #fefefe;
}

.social.linkedin {
  background-color: #007bb5;
  color: #fefefe;
}

.social.linkedin:hover, .social.linkedin:focus {
  background-color: #006291;
  color: #fefefe;
}

.social.youtube {
  background-color: #bb0000;
  color: #fefefe;
}

.social.youtube:hover, .social.youtube:focus {
  background-color: #960000;
  color: #fefefe;
}

.social.instagram {
  background-color: #125688;
  color: #fefefe;
}

.social.instagram:hover, .social.instagram:focus {
  background-color: #0e456d;
  color: #fefefe;
}

.social.pinterest {
  background-color: #cb2027;
  color: #fefefe;
}

.social.pinterest:hover, .social.pinterest:focus {
  background-color: #a21a1f;
  color: #fefefe;
}

.social.google-plus {
  background-color: #dd4b39;
  color: #fefefe;
}

.social.google-plus:hover, .social.google-plus:focus {
  background-color: #be3221;
  color: #fefefe;
}

.social.github {
  background-color: #000000;
  color: #fefefe;
}

.social.github:hover, .social.github:focus {
  background-color: black;
  color: #fefefe;
}

.social.tumblr {
  background-color: #32506d;
  color: #fefefe;
}

.social.tumblr:hover, .social.tumblr:focus {
  background-color: #284057;
  color: #fefefe;
}

.social > .fa {
  color: #fefefe;
  margin-right: .25rem;
}

JS