Social buttons

By Harry Manchanda

social icons button

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;
}

Social buttons

By Harry Manchanda

Shopping Cart Button

Hover Like Button

Social Icon Buttons

Social buttons

By Harry Manchanda

Similar Building Blocks

Shopping Cart Button

Hover Like Button

Social Icon Buttons