Createx Buy now

Social buttons

Display links to your social network accounts with these icon buttons.

Createx component

Type: basic

<!-- Facebook -->
<a href="#" class="btn-social">
  <i class="ci-facebook"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn-social">
  <i class="ci-twitter"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn-social">
  <i class="ci-instagram"></i>
</a>

<!-- Google -->
<a href="#" class="btn-social">
  <i class="ci-google"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn-social">
  <i class="ci-linkedin"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn-social">
  <i class="ci-pinterest"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn-social">
  <i class="ci-tumblr"></i>
</a>

<!-- Behance -->
<a href="#" class="btn-social">
  <i class="ci-behance"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn-social">
  <i class="ci-dribbble"></i>
</a>

<!-- VKontakte -->
<a href="#" class="btn-social">
  <i class="ci-vkontakte"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn-social">
  <i class="ci-odnoklassniki"></i>
</a>

<!-- Skype -->
<a href="#" class="btn-social">
  <i class="ci-skype"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn-social">
  <i class="ci-google-hangouts"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn-social">
  <i class="ci-messenger"></i>
</a>

<!-- Viber -->
<a href="#" class="btn-social">
  <i class="ci-viber"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn-social">
  <i class="ci-telegram"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn-social">
  <i class="ci-youtube"></i>
</a>

<!-- Figma -->
<a href="#" class="btn-social">
  <i class="ci-figma"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn-social">
  <i class="ci-vimeo"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn-social">
  <i class="ci-wechat"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn-social">
  <i class="ci-github"></i>
</a>

<!-- GitLab -->
<a href="#" class="btn-social">
  <i class="ci-gitlab"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn-social">
  <i class="ci-paypal"></i>
</a>

<!-- Slack -->
<a href="#" class="btn-social">
  <i class="ci-slack"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn-social">
  <i class="ci-twitch"></i>
</a>

<!-- RSS -->
<a href="#" class="btn-social">
  <i class="ci-rss"></i>
</a>

Type: solid

<!-- Facebook -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-facebook"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-twitter"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-instagram"></i>
</a>

<!-- Google -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-google"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-linkedin"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-pinterest"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-tumblr"></i>
</a>

<!-- Behance -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-behance"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-dribbble"></i>
</a>

<!-- VKontakte -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-vkontakte"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-odnoklassniki"></i>
</a>

<!-- Skype -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-skype"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-google-hangouts"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-messenger"></i>
</a>

<!-- Viber -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-viber"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-telegram"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-youtube"></i>
</a>

<!-- Figma -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-figma"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-vimeo"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-wechat"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-github"></i>
</a>

<!-- GitLab -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-gitlab"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-paypal"></i>
</a>

<!-- Slack -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-slack"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-twitch"></i>
</a>

<!-- RSS -->
<a href="#" class="btn-social bs-solid">
  <i class="ci-rss"></i>
</a>

Type: outline

<!-- Facebook -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-facebook"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-twitter"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-instagram"></i>
</a>

<!-- Google -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-google"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-linkedin"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-pinterest"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-tumblr"></i>
</a>

<!-- Behance -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-behance"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-dribbble"></i>
</a>

<!-- VKontakte -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-vkontakte"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-odnoklassniki"></i>
</a>

<!-- Skype -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-skype"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-google-hangouts"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-messenger"></i>
</a>

<!-- Viber -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-viber"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-telegram"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-youtube"></i>
</a>

<!-- Figma -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-figma"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-vimeo"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-wechat"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-github"></i>
</a>

<!-- GitLab -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-gitlab"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-paypal"></i>
</a>

<!-- Slack -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-slack"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-twitch"></i>
</a>

<!-- RSS -->
<a href="#" class="btn-social bs-outline">
  <i class="ci-rss"></i>
</a>

Round shape

<!-- Round solid button -->
<a href="#" class="btn-social bs-solid rounded-circle">
  <i class="ci-facebook"></i>
</a>

<!-- Round outline button -->
<a href="#" class="btn-social bs-outline rounded-circle">
  <i class="ci-facebook"></i>
</a>

Light version

<!-- Basic button -->
<a href="#" class="btn-social bs-light">
  <i class="ci-facebook"></i>
</a>

<!-- Solid button -->
<a href="#" class="btn-social bs-solid bs-light">
  <i class="ci-facebook"></i>
</a>

<!-- Outline button -->
<a href="#" class="btn-social bs-outline bs-light">
  <i class="ci-facebook"></i>
</a>
Top