Pro

Bootstrap Buttons Social

Some of the predefined buttons with social media brands logos and colors. FontAwesome was used.

Examples

Couple of social button usages, including icon only variants.

<!-- WhatsApp -->
<button type="button" class="btn shadow-none text[#075e54] bg[#cddfdd]" data-fx="h:bg[#9cbfbb]">
  <span>WhatsApp</span>
  <i class="fab fa-whatsapp btn-icon"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn shadow-none text[#bd081c] border[#bd081c]" data-fx="h:text[#fff] h:bg[#bd081c] ">
  <span>Pinterest</span>
  <i class="fab fa-pinterest btn-icon"></i>
</button>

<!-- Dribble -->
<button type="button" class="btn text-white bg[#ec4a89]" data-fx="h:bg[#df3678]">
  <span>Dribble</span>
  <i class="fab fa-dribbble btn-icon"></i>
</button>

<!-- Facebook -->
<button type="button" class="btn square square-md text-white bg[#3b5998]" data-fx="h:bg[#2c4a89]">
  <i class="fab fa-facebook-f h-50"></i>
</button>

<!-- Skype -->
<button type="button" class="btn circle circle-md text-white bg[#00aff0]" data-fx="h:bg[#008ec3]">
  <i class="fab fa-skype h-50"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn btn-link text-decoration-none text[#1da1f2]" data-fx="h:text[#1a90d9]">
  <span>Twitter</span>
  <i class="fab fa-twitter btn-icon"></i>
</button>

Overview

When some share buttons or any other purpose with the social brands buttons are needed, Torus Kit provide a list of the most popular ones in couple of variations. It’s easy to create new one with brand’s background color along with a custom hover color. Great source of the brand colors provides Brand Colors website.

Pro

How to use

Because we don’t want to include every brand color in the CSS file (as it will make it huge), JavaScript will bring some help. This way, it is possible to use unlimited numbers of background, border and text color for default and :hover state. Just use data-{bg|border|text}-color="{color} h:{color}" where {color} can be HEX, rgba or any CSS-readable color entry. Hover state color uses h:{color}. Read more in Colors utility.

<button type="button" class="btn text-white bg[#3b5998]" data-fx="h:bg[#2c4a89]">
  <span>Facebook</span>
  <i class="fab fa-facebook btn-icon"></i>
</button>
Pro

Solid buttons

Default Bootstrap buttons used with social brands and corresponding icon.

<!-- Facebook -->
<button type="button" class="btn text-white bg[#3b5998]" data-fx="h:bg[#002772]" >
  <span>Facebook</span>
  <i class="fab fa-facebook-f btn-icon"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn text-white bg[#0063dc]" data-fx="h:bg[#00459a]" >
  <span>Flickr</span>
  <i class="fab fa-flickr btn-icon"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn text-white bg[#dd4b39]" data-fx="h:bg[#c31600]" >
  <span>Google+</span>
  <i class="fab fa-google-plus-g btn-icon"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn text-white bg[#c13584]" data-fx="h:bg[#ac0062]" >
  <span>Instagram</span>
  <i class="fab fa-instagram btn-icon"></i>
</button>

<!-- Line -->
<button type="button" class="btn text-white bg[#00c300]" data-fx="h:bg[#008900]" >
  <span>Line</span>
  <i class="fab fa-line btn-icon"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn text-white bg[#0077b5]" data-fx="h:bg[#00547f]" >
  <span>LinkedIn</span>
  <i class="fab fa-linkedin-in btn-icon"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn text-white bg[#e0393e]" data-fx="h:bg[#c50007]" >
  <span>Meetup</span>
  <i class="fab fa-meetup btn-icon"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn text-white bg[#0084ff]" data-fx="h:bg[#005cb3]" >
  <span>Messenger</span>
  <i class="fab fa-facebook-messenger btn-icon"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn text-white bg[#ed812b]" data-fx="h:bg[#c45700]" >
  <span>Odnoklassniki</span>
  <i class="fab fa-odnoklassniki btn-icon"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn text-white bg[#bd081c]" data-fx="h:bg[#8b000f]" >
  <span>Pinterest</span>
  <i class="fab fa-pinterest-p btn-icon"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn text-white bg[#ff4500]" data-fx="h:bg[#b33000]" >
  <span>Reddit</span>
  <i class="fab fa-reddit-alien btn-icon"></i>
</button>

<!-- Skype -->
<button type="button" class="btn text-white bg[#00aff0]" data-fx="h:bg[#007ba8]" >
  <span>Skype</span>
  <i class="fab fa-skype btn-icon"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn bg[#fffc00]" data-fx="h:bg[#eccd00]" data-text-color="#c98600">
  <span>SnapChat</span>
  <i class="fab fa-snapchat-ghost btn-icon"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn text-white bg[#eb4924]" data-fx="h:bg[#be2300]" >
  <span>StumbleUpon</span>
  <i class="fab fa-stumbleupon btn-icon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn text-white bg[#35465c]" data-fx="h:bg[#002b66]" >
  <span>Tumblr</span>
  <i class="fab fa-tumblr btn-icon"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn text-white bg[#1da1f2]" data-fx="h:bg[#0075be]" >
  <span>Twitter</span>
  <i class="fab fa-twitter btn-icon"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn text-white bg[#45668e]" data-fx="h:bg[#004494]" >
  <span>VKontakte</span>
  <i class="fab fa-vk btn-icon"></i>
</button>

<!-- Viber -->
<button type="button" class="btn text-white bg[#59267c]" data-fx="h:bg[#420072]" >
  <span>Viber</span>
  <i class="fab fa-viber btn-icon"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn text-white bg[#7bb32e]" data-fx="h:bg[#5a9e00]" >
  <span>WeChat</span>
  <i class="fab fa-weixin btn-icon"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn text-white bg[#e6162d]" data-fx="h:bg[#b00015]" >
  <span>Weibo</span>
  <i class="fab fa-weibo btn-icon"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn text-white bg[#075e54]" data-fx="h:bg[#00473f]" >
  <span>WhatsApp</span>
  <i class="fab fa-whatsapp btn-icon"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn text-white bg[#ff0000]" data-fx="h:bg[#b30000]" >
  <span>YouTube</span>
  <i class="fab fa-youtube btn-icon"></i>
</button>
Pro

Light buttons

Torus Kit light buttons version of Bootstrap default ones used with social brands. In order to keep the button style lightweight, we’ve removed a shadow with .shadow-none class.

<!-- Facebook -->
<button type="button" class="btn shadow-none text[#3b5998] bg[#d8deea]" data-fx="h:bg[#b1bdd6]">
  <span>Facebook</span>
  <i class="fab fa-facebook-f btn-icon"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn shadow-none text[#0063dc] bg[#cce0f8]" data-fx="h:bg[#99c1f1]">
  <span>Flickr</span>
  <i class="fab fa-flickr btn-icon"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn shadow-none text[#dd4b39] bg[#f8dbd7]" data-fx="h:bg[#f1b7b0]">
  <span>Google+</span>
  <i class="fab fa-google-plus-g btn-icon"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn shadow-none text[#c13584] bg[#f3d7e6]" data-fx="h:bg[#e6aece]">
  <span>Instagram</span>
  <i class="fab fa-instagram btn-icon"></i>
</button>

<!-- Line -->
<button type="button" class="btn shadow-none text[#00c300] bg[#ccf3cc]" data-fx="h:bg[#99e799]">
  <span>Line</span>
  <i class="fab fa-line btn-icon"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn shadow-none text[#0077b5] bg[#cce4f0]" data-fx="h:bg[#99c9e1]">
  <span>LinkedIn</span>
  <i class="fab fa-linkedin-in btn-icon"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn shadow-none text[#e0393e] bg[#f9d7d8]" data-fx="h:bg[#f3b0b2]">
  <span>Meetup</span>
  <i class="fab fa-meetup btn-icon"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn shadow-none text[#0084ff] bg[#cce6ff]" data-fx="h:bg[#99ceff]">
  <span>Messenger</span>
  <i class="fab fa-facebook-messenger btn-icon"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn shadow-none text[#ed812b] bg[#fbe6d5]" data-fx="h:bg[#f8cdaa]">
  <span>Odnoklassniki</span>
  <i class="fab fa-odnoklassniki btn-icon"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn shadow-none text[#bd081c] bg[#f2ced2]" data-fx="h:bg[#e59ca4]">
  <span>Pinterest</span>
  <i class="fab fa-pinterest-p btn-icon"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn shadow-none text[#ff4500] bg[#ffdacc]" data-fx="h:bg[#ffb599]">
  <span>Reddit</span>
  <i class="fab fa-reddit-alien btn-icon"></i>
</button>

<!-- Skype -->
<button type="button" class="btn shadow-none text[#00aff0] bg[#cceffc]" data-fx="h:bg[#99dff9]">
  <span>Skype</span>
  <i class="fab fa-skype btn-icon"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn shadow-none text[#c98600] bg[#fffecc]" data-fx="h:bg[#fffe99]">
  <span>SnapChat</span>
  <i class="fab fa-snapchat-ghost btn-icon"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn shadow-none text[#eb4924] bg[#fbdbd3]" data-fx="h:bg[#f7b6a7]">
  <span>StumbleUpon</span>
  <i class="fab fa-stumbleupon btn-icon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn shadow-none text[#35465c] bg[#d7dade]" data-fx="h:bg[#aeb5be]">
  <span>Tumblr</span>
  <i class="fab fa-tumblr btn-icon"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn shadow-none text[#1da1f2] bg[#d2ecfc]" data-fx="h:bg[#a5d9fa]">
  <span>Twitter</span>
  <i class="fab fa-twitter btn-icon"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn shadow-none text[#45668e] bg[#dae0e8]" data-fx="h:bg[#b5c2d2]">
  <span>VKontakte</span>
  <i class="fab fa-vk btn-icon"></i>
</button>

<!-- Viber -->
<button type="button" class="btn shadow-none text[#59267c] bg[#ded4e5]" data-fx="h:bg[#bda8cb]">
  <span>Viber</span>
  <i class="fab fa-viber btn-icon"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn shadow-none text[#7bb32e] bg[#e5f0d5]" data-fx="h:bg[#cae1ab]">
  <span>WeChat</span>
  <i class="fab fa-weixin btn-icon"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn shadow-none text[#e6162d] bg[#fad0d5]" data-fx="h:bg[#f5a2ab]">
  <span>Weibo</span>
  <i class="fab fa-weibo btn-icon"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn shadow-none text[#075e54] bg[#cddfdd]" data-fx="h:bg[#9cbfbb]">
  <span>WhatsApp</span>
  <i class="fab fa-whatsapp btn-icon"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn shadow-none text[#ff0000] bg[#ffcccc]" data-fx="h:bg[#ff9999]">
  <span>YouTube</span>
  <i class="fab fa-youtube btn-icon"></i>
</button>
Pro

Outline buttons

Outlined variation of the default solid button. Use with data-border-color, data-text-color and data-bg-color. Read move about these Color utilities and Border utilities. Shadows has been removed with .shadow-none class.

<!-- Facebook -->
<button type="button" class="btn shadow-none text[#3b5998] border[#3b5998]" data-fx="h:text-white h:bg[#3b5998]">
  <span>Facebook</span>
  <i class="fab fa-facebook-f btn-icon"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn shadow-none text[#0063dc] border[#0063dc]" data-fx="h:text-white h:bg[#0063dc]">
  <span>Flickr</span>
  <i class="fab fa-flickr btn-icon"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn shadow-none text[#dd4b39] border[#dd4b39]" data-fx="h:text-white h:bg[#dd4b39]">
  <span>Google+</span>
  <i class="fab fa-google-plus-g btn-icon"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn shadow-none text[#c13584] border[#c13584]" data-fx="h:text-white h:bg[#c13584]">
  <span>Instagram</span>
  <i class="fab fa-instagram btn-icon"></i>
</button>

<!-- Line -->
<button type="button" class="btn shadow-none text[#00c300] border[#00c300]" data-fx="h:text-white h:bg[#00c300]">
  <span>Line</span>
  <i class="fab fa-line btn-icon"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn shadow-none text[#0077b5] border[#0077b5]" data-fx="h:text-white h:bg[#0077b5]">
  <span>LinkedIn</span>
  <i class="fab fa-linkedin-in btn-icon"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn shadow-none text[#e0393e] border[#e0393e]" data-fx="h:text-white h:bg[#e0393e]">
  <span>Meetup</span>
  <i class="fab fa-meetup btn-icon"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn shadow-none text[#0084ff] border[#0084ff]" data-fx="h:text-white h:bg[#0084ff]">
  <span>Messenger</span>
  <i class="fab fa-facebook-messenger btn-icon"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn shadow-none text[#ed812b] border[#ed812b]" data-fx="h:text-white h:bg[#ed812b]">
  <span>Odnoklassniki</span>
  <i class="fab fa-odnoklassniki btn-icon"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn shadow-none text[#bd081c] border[#bd081c]" data-fx="h:text-white h:bg[#bd081c]">
  <span>Pinterest</span>
  <i class="fab fa-pinterest-p btn-icon"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn shadow-none text[#ff4500] border[#ff4500]" data-fx="h:text-white h:bg[#ff4500]">
  <span>Reddit</span>
  <i class="fab fa-reddit-alien btn-icon"></i>
</button>

<!-- Skype -->
<button type="button" class="btn shadow-none text[#00aff0] border[#00aff0]" data-fx="h:text-white h:bg[#00aff0]">
  <span>Skype</span>
  <i class="fab fa-skype btn-icon"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn shadow-none text[#c98600] border[#fffc00]" data-fx="h:text-white h:bg[#fffc00]">
  <span>SnapChat</span>
  <i class="fab fa-snapchat-ghost btn-icon"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn shadow-none text[#eb4924] border[#eb4924]" data-fx="h:text-white h:bg[#eb4924]">
  <span>StumbleUpon</span>
  <i class="fab fa-stumbleupon btn-icon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn shadow-none text[#35465c] border[#35465c]" data-fx="h:text-white h:bg[#35465c]">
  <span>Tumblr</span>
  <i class="fab fa-tumblr btn-icon"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn shadow-none text[#1da1f2] border[#1da1f2]" data-fx="h:text-white h:bg[#1da1f2]">
  <span>Twitter</span>
  <i class="fab fa-twitter btn-icon"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn shadow-none text[#45668e] border[#45668e]" data-fx="h:text-white h:bg[#45668e]">
  <span>VKontakte</span>
  <i class="fab fa-vk btn-icon"></i>
</button>

<!-- Viber -->
<button type="button" class="btn shadow-none text[#59267c] border[#59267c]" data-fx="h:text-white h:bg[#59267c]">
  <span>Viber</span>
  <i class="fab fa-viber btn-icon"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn shadow-none text[#7bb32e] border[#7bb32e]" data-fx="h:text-white h:bg[#7bb32e]">
  <span>WeChat</span>
  <i class="fab fa-weixin btn-icon"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn shadow-none text[#e6162d] border[#e6162d]" data-fx="h:text-white h:bg[#e6162d]">
  <span>Weibo</span>
  <i class="fab fa-weibo btn-icon"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn shadow-none text[#075e54] border[#075e54]" data-fx="h:text-white h:bg[#075e54]">
  <span>WhatsApp</span>
  <i class="fab fa-whatsapp btn-icon"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn shadow-none text[#ff0000] border[#ff0000]" data-fx="h:text-white h:bg[#ff0000]">
  <span>YouTube</span>
  <i class="fab fa-youtube btn-icon"></i>
</button>

Simple link used with Bootstrap’s .btn-link class and Torus Kit data-text-color utility.

<!-- Facebook -->
<button type="button" class="btn btn-link text[#3b5998]" data-fx="h:text[#002772]">
  <span>Facebook</span>
  <i class="fab fa-facebook-f btn-icon"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn btn-link text[#0063dc]" data-fx="h:text[#00459a]">
  <span>Flickr</span>
  <i class="fab fa-flickr btn-icon"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn btn-link text[#dd4b39]" data-fx="h:text[#c31600]">
  <span>Google+</span>
  <i class="fab fa-google-plus-g btn-icon"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn btn-link text[#c13584]" data-fx="h:text[#ac0062]">
  <span>Instagram</span>
  <i class="fab fa-instagram btn-icon"></i>
</button>

<!-- Line -->
<button type="button" class="btn btn-link text[#00c300]" data-fx="h:text[#008900]">
  <span>Line</span>
  <i class="fab fa-line btn-icon"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn btn-link text[#0077b5]" data-fx="h:text[#00547f]">
  <span>LinkedIn</span>
  <i class="fab fa-linkedin-in btn-icon"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn btn-link text[#e0393e]" data-fx="h:text[#c50007]">
  <span>Meetup</span>
  <i class="fab fa-meetup btn-icon"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn btn-link text[#0084ff]" data-fx="h:text[#005cb3]">
  <span>Messenger</span>
  <i class="fab fa-facebook-messenger btn-icon"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn btn-link text[#ed812b]" data-fx="h:text[#c45700]">
  <span>Odnoklassniki</span>
  <i class="fab fa-odnoklassniki btn-icon"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn btn-link text[#bd081c]" data-fx="h:text[#8b000f]">
  <span>Pinterest</span>
  <i class="fab fa-pinterest-p btn-icon"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn btn-link text[#ff4500]" data-fx="h:text[#b33000]">
  <span>Reddit</span>
  <i class="fab fa-reddit-alien btn-icon"></i>
</button>

<!-- Skype -->
<button type="button" class="btn btn-link text[#00aff0]" data-fx="h:text[#007ba8]">
  <span>Skype</span>
  <i class="fab fa-skype btn-icon"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn btn-link text[#fffc00]" data-fx="h:text[#eccd00]">
  <span>SnapChat</span>
  <i class="fab fa-snapchat-ghost btn-icon"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn btn-link text[#eb4924]" data-fx="h:text[#be2300]">
  <span>StumbleUpon</span>
  <i class="fab fa-stumbleupon btn-icon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn btn-link text[#35465c]" data-fx="h:text[#002b66]">
  <span>Tumblr</span>
  <i class="fab fa-tumblr btn-icon"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn btn-link text[#1da1f2]" data-fx="h:text[#0075be]">
  <span>Twitter</span>
  <i class="fab fa-twitter btn-icon"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn btn-link text[#45668e]" data-fx="h:text[#004494]">
  <span>VKontakte</span>
  <i class="fab fa-vk btn-icon"></i>
</button>

<!-- Viber -->
<button type="button" class="btn btn-link text[#59267c]" data-fx="h:text[#420072]">
  <span>Viber</span>
  <i class="fab fa-viber btn-icon"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn btn-link text[#7bb32e]" data-fx="h:text[#5a9e00]">
  <span>WeChat</span>
  <i class="fab fa-weixin btn-icon"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn btn-link text[#e6162d]" data-fx="h:text[#b00015]">
  <span>Weibo</span>
  <i class="fab fa-weibo btn-icon"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn btn-link text[#075e54]" data-fx="h:text[#00473f]">
  <span>WhatsApp</span>
  <i class="fab fa-whatsapp btn-icon"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn btn-link text[#ff0000]" data-fx="h:text[#b30000]">
  <span>YouTube</span>
  <i class="fab fa-youtube btn-icon"></i>
</button>
Pro

Icons only

In some cases, only the brand icon is required. But because the icons has a different dimensions, default Bootstrap button cannot be used. Torus Kit brings Shapes utilities that are sizes according the Bootstrap button sizes - sm, md and lg. Use .square with .square-{sm|md|lg} for square shape and .circle with .circle-{sm|md|lg} for circle shape.

Square

Add .square-md class to .square.

<!-- Facebook -->
<button type="button" class="btn square square-md text-white bg[#3b5998] " data-fx="h:bg[#002772]">
  <i class="fab fa-facebook-f"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn square square-md text-white bg[#0063dc] " data-fx="h:bg[#00459a]">
  <i class="fab fa-flickr"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn square square-md text-white bg[#dd4b39] " data-fx="h:bg[#c31600]">
  <i class="fab fa-google-plus-g"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn square square-md text-white bg[#c13584] " data-fx="h:bg[#ac0062]">
  <i class="fab fa-instagram"></i>
</button>

<!-- Line -->
<button type="button" class="btn square square-md text-white bg[#00c300] " data-fx="h:bg[#008900]">
  <i class="fab fa-line"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn square square-md text-white bg[#0077b5] " data-fx="h:bg[#00547f]">
  <i class="fab fa-linkedin-in"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn square square-md text-white bg[#e0393e] " data-fx="h:bg[#c50007]">
  <i class="fab fa-meetup"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn square square-md text-white bg[#0084ff] " data-fx="h:bg[#005cb3]">
  <i class="fab fa-facebook-messenger"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn square square-md text-white bg[#ed812b] " data-fx="h:bg[#c45700]">
  <i class="fab fa-odnoklassniki"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn square square-md text-white bg[#bd081c] " data-fx="h:bg[#8b000f]">
  <i class="fab fa-pinterest-p"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn square square-md text-white bg[#ff4500] " data-fx="h:bg[#b33000]">
  <i class="fab fa-reddit-alien"></i>
</button>

<!-- Skype -->
<button type="button" class="btn square square-md text-white bg[#00aff0] " data-fx="h:bg[#007ba8]">
  <i class="fab fa-skype"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn square square-md  bg[#fffc00] text[#c98600]" data-fx="h:bg[#eccd00]">
  <i class="fab fa-snapchat-ghost"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn square square-md text-white bg[#eb4924] " data-fx="h:bg[#be2300]">
  <i class="fab fa-stumbleupon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn square square-md text-white bg[#35465c] " data-fx="h:bg[#002b66]">
  <i class="fab fa-tumblr"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn square square-md text-white bg[#1da1f2] " data-fx="h:bg[#0075be]">
  <i class="fab fa-twitter"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn square square-md text-white bg[#45668e] " data-fx="h:bg[#004494]">
  <i class="fab fa-vk"></i>
</button>

<!-- Viber -->
<button type="button" class="btn square square-md text-white bg[#59267c] " data-fx="h:bg[#420072]">
  <i class="fab fa-viber"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn square square-md text-white bg[#7bb32e] " data-fx="h:bg[#5a9e00]">
  <i class="fab fa-weixin"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn square square-md text-white bg[#e6162d] " data-fx="h:bg[#b00015]">
  <i class="fab fa-weibo"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn square square-md text-white bg[#075e54] " data-fx="h:bg[#00473f]">
  <i class="fab fa-whatsapp"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn square square-md text-white bg[#ff0000] " data-fx="h:bg[#b30000]">
  <i class="fab fa-youtube"></i>
</button>

Square small

Add .square-sm class to .square. Also, it’s good idea to add .text-small to make an icon smaller.

<!-- Facebook -->
<button type="button" class="btn text-small square square-sm text-white bg[#3b5998] " data-fx="h:bg[#002772]">
  <i class="fab fa-facebook-f"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn text-small square square-sm text-white bg[#0063dc] " data-fx="h:bg[#00459a]">
  <i class="fab fa-flickr"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn text-small square square-sm text-white bg[#dd4b39] " data-fx="h:bg[#c31600]">
  <i class="fab fa-google-plus-g"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn text-small square square-sm text-white bg[#c13584] " data-fx="h:bg[#ac0062]">
  <i class="fab fa-instagram"></i>
</button>

<!-- Line -->
<button type="button" class="btn text-small square square-sm text-white bg[#00c300] " data-fx="h:bg[#008900]">
  <i class="fab fa-line"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn text-small square square-sm text-white bg[#0077b5] " data-fx="h:bg[#00547f]">
  <i class="fab fa-linkedin-in"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn text-small square square-sm text-white bg[#e0393e] " data-fx="h:bg[#c50007]">
  <i class="fab fa-meetup"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn text-small square square-sm text-white bg[#0084ff] " data-fx="h:bg[#005cb3]">
  <i class="fab fa-facebook-messenger"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn text-small square square-sm text-white bg[#ed812b] " data-fx="h:bg[#c45700]">
  <i class="fab fa-odnoklassniki"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn text-small square square-sm text-white bg[#bd081c] " data-fx="h:bg[#8b000f]">
  <i class="fab fa-pinterest-p"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn text-small square square-sm text-white bg[#ff4500] " data-fx="h:bg[#b33000]">
  <i class="fab fa-reddit-alien"></i>
</button>

<!-- Skype -->
<button type="button" class="btn text-small square square-sm text-white bg[#00aff0] " data-fx="h:bg[#007ba8]">
  <i class="fab fa-skype"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn text-small square square-sm  bg[#fffc00] text[#c98600]" data-fx="h:bg[#eccd00]">
  <i class="fab fa-snapchat-ghost"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn text-small square square-sm text-white bg[#eb4924] " data-fx="h:bg[#be2300]">
  <i class="fab fa-stumbleupon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn text-small square square-sm text-white bg[#35465c] " data-fx="h:bg[#002b66]">
  <i class="fab fa-tumblr"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn text-small square square-sm text-white bg[#1da1f2] " data-fx="h:bg[#0075be]">
  <i class="fab fa-twitter"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn text-small square square-sm text-white bg[#45668e] " data-fx="h:bg[#004494]">
  <i class="fab fa-vk"></i>
</button>

<!-- Viber -->
<button type="button" class="btn text-small square square-sm text-white bg[#59267c] " data-fx="h:bg[#420072]">
  <i class="fab fa-viber"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn text-small square square-sm text-white bg[#7bb32e] " data-fx="h:bg[#5a9e00]">
  <i class="fab fa-weixin"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn text-small square square-sm text-white bg[#e6162d] " data-fx="h:bg[#b00015]">
  <i class="fab fa-weibo"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn text-small square square-sm text-white bg[#075e54] " data-fx="h:bg[#00473f]">
  <i class="fab fa-whatsapp"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn text-small square square-sm text-white bg[#ff0000] " data-fx="h:bg[#b30000]">
  <i class="fab fa-youtube"></i>
</button>

Square large

Add .square-lg class to .square. Also, it’s good idea to add .text-large to make an icon larger.

<!-- Facebook -->
<button type="button" class="btn text-large square square-lg text-white bg[#3b5998] " data-fx="h:bg[#002772]">
  <i class="fab fa-facebook-f"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn text-large square square-lg text-white bg[#0063dc] " data-fx="h:bg[#00459a]">
  <i class="fab fa-flickr"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn text-large square square-lg text-white bg[#dd4b39] " data-fx="h:bg[#c31600]">
  <i class="fab fa-google-plus-g"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn text-large square square-lg text-white bg[#c13584] " data-fx="h:bg[#ac0062]">
  <i class="fab fa-instagram"></i>
</button>

<!-- Line -->
<button type="button" class="btn text-large square square-lg text-white bg[#00c300] " data-fx="h:bg[#008900]">
  <i class="fab fa-line"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn text-large square square-lg text-white bg[#0077b5] " data-fx="h:bg[#00547f]">
  <i class="fab fa-linkedin-in"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn text-large square square-lg text-white bg[#e0393e] " data-fx="h:bg[#c50007]">
  <i class="fab fa-meetup"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn text-large square square-lg text-white bg[#0084ff] " data-fx="h:bg[#005cb3]">
  <i class="fab fa-facebook-messenger"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn text-large square square-lg text-white bg[#ed812b] " data-fx="h:bg[#c45700]">
  <i class="fab fa-odnoklassniki"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn text-large square square-lg text-white bg[#bd081c] " data-fx="h:bg[#8b000f]">
  <i class="fab fa-pinterest-p"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn text-large square square-lg text-white bg[#ff4500] " data-fx="h:bg[#b33000]">
  <i class="fab fa-reddit-alien"></i>
</button>

<!-- Skype -->
<button type="button" class="btn text-large square square-lg text-white bg[#00aff0] " data-fx="h:bg[#007ba8]">
  <i class="fab fa-skype"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn text-large square square-lg  bg[#fffc00] text[#c98600]" data-fx="h:bg[#eccd00]">
  <i class="fab fa-snapchat-ghost"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn text-large square square-lg text-white bg[#eb4924] " data-fx="h:bg[#be2300]">
  <i class="fab fa-stumbleupon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn text-large square square-lg text-white bg[#35465c] " data-fx="h:bg[#002b66]">
  <i class="fab fa-tumblr"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn text-large square square-lg text-white bg[#1da1f2] " data-fx="h:bg[#0075be]">
  <i class="fab fa-twitter"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn text-large square square-lg text-white bg[#45668e] " data-fx="h:bg[#004494]">
  <i class="fab fa-vk"></i>
</button>

<!-- Viber -->
<button type="button" class="btn text-large square square-lg text-white bg[#59267c] " data-fx="h:bg[#420072]">
  <i class="fab fa-viber"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn text-large square square-lg text-white bg[#7bb32e] " data-fx="h:bg[#5a9e00]">
  <i class="fab fa-weixin"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn text-large square square-lg text-white bg[#e6162d] " data-fx="h:bg[#b00015]">
  <i class="fab fa-weibo"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn text-large square square-lg text-white bg[#075e54] " data-fx="h:bg[#00473f]">
  <i class="fab fa-whatsapp"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn text-large square square-lg text-white bg[#ff0000] " data-fx="h:bg[#b30000]">
  <i class="fab fa-youtube"></i>
</button>

Circle

Add .circle-md class to .circle.

<!-- Facebook -->
<button type="button" class="btn circle circle-md text-white  bg[#3b5998]" data-fx="h:bg[#002772]">
  <i class="fab fa-facebook-f"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn circle circle-md text-white  bg[#0063dc]" data-fx="h:bg[#00459a]">
  <i class="fab fa-flickr"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn circle circle-md text-white  bg[#dd4b39]" data-fx="h:bg[#c31600]">
  <i class="fab fa-google-plus-g"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn circle circle-md text-white  bg[#c13584]" data-fx="h:bg[#ac0062]">
  <i class="fab fa-instagram"></i>
</button>

<!-- Line -->
<button type="button" class="btn circle circle-md text-white  bg[#00c300]" data-fx="h:bg[#008900]">
  <i class="fab fa-line"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn circle circle-md text-white  bg[#0077b5]" data-fx="h:bg[#00547f]">
  <i class="fab fa-linkedin-in"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn circle circle-md text-white  bg[#e0393e]" data-fx="h:bg[#c50007]">
  <i class="fab fa-meetup"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn circle circle-md text-white  bg[#0084ff]" data-fx="h:bg[#005cb3]">
  <i class="fab fa-facebook-messenger"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn circle circle-md text-white  bg[#ed812b]" data-fx="h:bg[#c45700]">
  <i class="fab fa-odnoklassniki"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn circle circle-md text-white  bg[#bd081c]" data-fx="h:bg[#8b000f]">
  <i class="fab fa-pinterest-p"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn circle circle-md text-white  bg[#ff4500]" data-fx="h:bg[#b33000]">
  <i class="fab fa-reddit-alien"></i>
</button>

<!-- Skype -->
<button type="button" class="btn circle circle-md text-white  bg[#00aff0]" data-fx="h:bg[#007ba8]">
  <i class="fab fa-skype"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn circle circle-md  text[#c98600] bg[#fffc00]" data-fx="h:bg[#eccd00]">
  <i class="fab fa-snapchat-ghost"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn circle circle-md text-white  bg[#eb4924]" data-fx="h:bg[#be2300]">
  <i class="fab fa-stumbleupon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn circle circle-md text-white  bg[#35465c]" data-fx="h:bg[#002b66]">
  <i class="fab fa-tumblr"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn circle circle-md text-white  bg[#1da1f2]" data-fx="h:bg[#0075be]">
  <i class="fab fa-twitter"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn circle circle-md text-white  bg[#45668e]" data-fx="h:bg[#004494]">
  <i class="fab fa-vk"></i>
</button>

<!-- Viber -->
<button type="button" class="btn circle circle-md text-white  bg[#59267c]" data-fx="h:bg[#420072]">
  <i class="fab fa-viber"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn circle circle-md text-white  bg[#7bb32e]" data-fx="h:bg[#5a9e00]">
  <i class="fab fa-weixin"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn circle circle-md text-white  bg[#e6162d]" data-fx="h:bg[#b00015]">
  <i class="fab fa-weibo"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn circle circle-md text-white  bg[#075e54]" data-fx="h:bg[#00473f]">
  <i class="fab fa-whatsapp"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn circle circle-md text-white  bg[#ff0000]" data-fx="h:bg[#b30000]">
  <i class="fab fa-youtube"></i>
</button>

Circle small

Add .circle-sm class to .circle. Also, it’s good idea to add .text-small to make an icon smaller.

<!-- Facebook -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#3b5998]" data-fx="h:bg[#002772]">
  <i class="fab fa-facebook-f"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#0063dc]" data-fx="h:bg[#00459a]">
  <i class="fab fa-flickr"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#dd4b39]" data-fx="h:bg[#c31600]">
  <i class="fab fa-google-plus-g"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#c13584]" data-fx="h:bg[#ac0062]">
  <i class="fab fa-instagram"></i>
</button>

<!-- Line -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#00c300]" data-fx="h:bg[#008900]">
  <i class="fab fa-line"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#0077b5]" data-fx="h:bg[#00547f]">
  <i class="fab fa-linkedin-in"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#e0393e]" data-fx="h:bg[#c50007]">
  <i class="fab fa-meetup"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#0084ff]" data-fx="h:bg[#005cb3]">
  <i class="fab fa-facebook-messenger"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#ed812b]" data-fx="h:bg[#c45700]">
  <i class="fab fa-odnoklassniki"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#bd081c]" data-fx="h:bg[#8b000f]">
  <i class="fab fa-pinterest-p"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#ff4500]" data-fx="h:bg[#b33000]">
  <i class="fab fa-reddit-alien"></i>
</button>

<!-- Skype -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#00aff0]" data-fx="h:bg[#007ba8]">
  <i class="fab fa-skype"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn text-small circle circle-sm  text[#c98600] bg[#fffc00]" data-fx="h:bg[#eccd00]">
  <i class="fab fa-snapchat-ghost"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#eb4924]" data-fx="h:bg[#be2300]">
  <i class="fab fa-stumbleupon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#35465c]" data-fx="h:bg[#002b66]">
  <i class="fab fa-tumblr"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#1da1f2]" data-fx="h:bg[#0075be]">
  <i class="fab fa-twitter"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#45668e]" data-fx="h:bg[#004494]">
  <i class="fab fa-vk"></i>
</button>

<!-- Viber -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#59267c]" data-fx="h:bg[#420072]">
  <i class="fab fa-viber"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#7bb32e]" data-fx="h:bg[#5a9e00]">
  <i class="fab fa-weixin"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#e6162d]" data-fx="h:bg[#b00015]">
  <i class="fab fa-weibo"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#075e54]" data-fx="h:bg[#00473f]">
  <i class="fab fa-whatsapp"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn text-small circle circle-sm text-white  bg[#ff0000]" data-fx="h:bg[#b30000]">
  <i class="fab fa-youtube"></i>
</button>

Circle large

Add .circle-lg class to .circle. Also, it’s good idea to add .text-large to make an icon larger.

<!-- Facebook -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#3b5998]" data-fx="h:bg[#002772]">
  <i class="fab fa-facebook-f"></i>
</button>

<!-- Flickr -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#0063dc]" data-fx="h:bg[#00459a]">
  <i class="fab fa-flickr"></i>
</button>

<!-- Google+ -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#dd4b39]" data-fx="h:bg[#c31600]">
  <i class="fab fa-google-plus-g"></i>
</button>

<!-- Instagram -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#c13584]" data-fx="h:bg[#ac0062]">
  <i class="fab fa-instagram"></i>
</button>

<!-- Line -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#00c300]" data-fx="h:bg[#008900]">
  <i class="fab fa-line"></i>
</button>

<!-- LinkedIn -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#0077b5]" data-fx="h:bg[#00547f]">
  <i class="fab fa-linkedin-in"></i>
</button>

<!-- Meetup -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#e0393e]" data-fx="h:bg[#c50007]">
  <i class="fab fa-meetup"></i>
</button>

<!-- Messenger -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#0084ff]" data-fx="h:bg[#005cb3]">
  <i class="fab fa-facebook-messenger"></i>
</button>

<!-- Odnoklassniki -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#ed812b]" data-fx="h:bg[#c45700]">
  <i class="fab fa-odnoklassniki"></i>
</button>

<!-- Pinterest -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#bd081c]" data-fx="h:bg[#8b000f]">
  <i class="fab fa-pinterest-p"></i>
</button>

<!-- Reddit -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#ff4500]" data-fx="h:bg[#b33000]">
  <i class="fab fa-reddit-alien"></i>
</button>

<!-- Skype -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#00aff0]" data-fx="h:bg[#007ba8]">
  <i class="fab fa-skype"></i>
</button>

<!-- SnapChat -->
<button type="button" class="btn text-large circle circle-lg  text[#c98600] bg[#fffc00]" data-fx="h:bg[#eccd00]">
  <i class="fab fa-snapchat-ghost"></i>
</button>

<!-- StumbleUpon -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#eb4924]" data-fx="h:bg[#be2300]">
  <i class="fab fa-stumbleupon"></i>
</button>

<!-- Tumblr -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#35465c]" data-fx="h:bg[#002b66]">
  <i class="fab fa-tumblr"></i>
</button>

<!-- Twitter -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#1da1f2]" data-fx="h:bg[#0075be]">
  <i class="fab fa-twitter"></i>
</button>

<!-- VKontakte -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#45668e]" data-fx="h:bg[#004494]">
  <i class="fab fa-vk"></i>
</button>

<!-- Viber -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#59267c]" data-fx="h:bg[#420072]">
  <i class="fab fa-viber"></i>
</button>

<!-- WeChat -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#7bb32e]" data-fx="h:bg[#5a9e00]">
  <i class="fab fa-weixin"></i>
</button>

<!-- Weibo -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#e6162d]" data-fx="h:bg[#b00015]">
  <i class="fab fa-weibo"></i>
</button>

<!-- WhatsApp -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#075e54]" data-fx="h:bg[#00473f]">
  <i class="fab fa-whatsapp"></i>
</button>

<!-- YouTube -->
<button type="button" class="btn text-large circle circle-lg text-white  bg[#ff0000]" data-fx="h:bg[#b30000]">
  <i class="fab fa-youtube"></i>
</button>
Pro

Notification style

Social buttons can be styled with notification badge. This one has been achieved by shape and position utilities.

<button type="button" class="btn text-white pos-rel bg[#3b5998]" data-fx="h:bg[#2c4a89]">
  <span>Facebook</span>
  <i class="fab fa-facebook btn-icon"></i>
  <span class="badge badge-danger rounded-pill shadow" data-position="right top" data-push="right-50 up-50">12</span>
</button>