Createx Buy now

Social buttons

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

Createx component

Type: basic

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Type: solid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Type: outline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Round shape

<!-- Round solid button -->
<a href="#" class="social-btn sb-solid sb-round">
  <i class="cxi-facebook"></i>
</a>

<!-- Round outline button -->
<a href="#" class="social-btn sb-outline sb-round">
  <i class="cxi-facebook"></i>
</a>

Light version

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

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

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