Social Buttons

Use the classes .bg--facebook, .bg--twitter etc. to colour buttons with their corresponding brand colours. 

<a class="btn bg--facebook btn--icon" href="#">
  <span class="btn__text"><i class="icon-class"></i>Button Text</span>
</a>
          

<a href="#" class="social-icon si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
<a href="#" class="social-icon si-dark si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-dark to the .social-icon to make it dark 
<a href="#" class="social-icon si-light si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-light to the .social-icon to make it light 
<a href="#" class="social-icon si-rounded si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-rounded to the .social-icon to make it rounded 
<a href="#" class="social-icon si-dark si-rounded si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-dark & .si-rounded to the .social-icon to make it dark & rounded 
<a href="#" class="social-icon si-light si-rounded si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-light & .si-rounded to the .social-icon to make it light & rounded 
<a href="#" class="social-icon si-borderless si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-borderless to the .social-icon to make it borderless 
<a href="#" class="social-icon si-borderless si-text-color si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-text-color to the .social-icon to make the Icon Colored 
<a href="#" class="social-icon si-colored si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-colored to the .social-icon to make it colored

Small Icons

<a href="#" class="social-icon si-dark si-small si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-dark & .si-small to the .social-icon to make it dark & small

Large Icons

<a href="#" class="social-icon si-dark si-large si-facebook">
  <i class="icon-facebook"></i>
  <i class="icon-facebook"></i>
</a>
Note: Just add the class .si-dark & .si-large to the .social-icon to make it dark & large

Share Panel

Share this Post:
Note: You can mix various classes together to make the social icons look according to your needs. It is completely flexible and extendable.
Btn Link w/ Social Icons
Twitter


Icon Buttons - Icon Only
Small Buttons
Standard Buttons
Large Buttons
Outline Buttons
Icon Buttons - Icon Only
Social Btns -
Btn Link w/ Social Icons
Twitter Facebook
Add to wishlist Twitter
Color Palette XS - No color detail

Buttons

Default Buttons

Red Red Teal Yellow Green Aqua Purple Blue Black White

Buttons With Icons

Teal Yellow Yellow Green Brown Aqua Purple Leaf Pink Blue Dirty Green Amber Black White

Mini 3D Buttons

Red Teal Yellow Green Brown Aqua Lime Purple Leaf Pink Blue Dirty Green Amber Black White

Small 3D Buttons

Red Teal Yellow Green Brown Aqua Lime Purple Leaf Pink

Large 3D Buttons

Red Teal Yellow Green Brown Aqua

Extra Large 3D Buttons

Purple Dirty Green Amber Black White

Icon Reveal buttons

Teal Yellow Purple Dirty Green Red White
Right Icon Reveal

3D Buttons with Sub-Text

Create a Canvas AccountFree Forever, Instant Activation Start your Free Trial30-Days & No Credit card Required

Simple Flat Buttons

Button Button Button Button Button
Create your Font Icon
Free Forever, Instant Activation

Simple Dark Buttons

Button Button Button Button Button
Create your Font Icon
Free Forever, Instant Activation

Border Buttons

Red Teal Yellow Green Brown Aqua Purple Leaf Pink Blue Dirty Green Amber
Button Button Button Button Button
Create your Font Icon
Free Forever, Instant Activation

Thin Border Buttons

Red Teal Yellow Green Brown Aqua Purple Leaf Pink Blue Dirty Green Amber

Circle Buttons

Red Teal Yellow
Green Brown Aqua
Flat Button Light Button Dark Button
Purple Leaf Pink
Blue Dirty Green Amber

Border Buttons with Fill Effect

Fill From Left Fill From Right Fill From Top Fill From Bottom

Bootstrap Buttons

Bootstrap Buttons - Sizes

Bootstrap Block Buttons

Bootstrap Disabled Buttons

Bootstrap Button Tags

Link

Bootstrap Dropdown Buttons

Bootstrap Split Dropdown Buttons

Bootstrap Dropdown Buttons - Sizing

Bootstrap Dropup Buttons

Shortcodes

Dribbble Shots

Twitter Feed

Follow Us on Twitter