Cartzilla Buy now

Social buttons

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

Cartzilla component

Type: solid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Discord -->
<a href="#" class="btn-social bs-discord">
  <i class="ci-discord"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn-social bs-tiktok">
  <i class="ci-tiktok"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn-social bs-whatsapp">
  <i class="ci-whatsapp"></i>
</a>
// Facebook
a(href="#").btn-social.bs-facebook
  i.ci-facebook

// Twitter
a(href="#").btn-social.bs-twitter
  i.ci-twitter

// Instagram
a(href="#").btn-social.bs-instagram
  i.ci-instagram

// Google
a(href="#").btn-social.bs-google
  i.ci-google

// LinkedIn
a(href="#").btn-social.bs-linkedin
  i.ci-linkedin

// Pinterest
a(href="#").btn-social.bs-pinterest
  i.ci-pinterest

// Tumblr
a(href="#").btn-social.bs-tumblr
  i.ci-tumblr

// Behance
a(href="#").btn-social.bs-behance
  i.ci-behance

// Dribbble
a(href="#").btn-social.bs-dribbble
  i.ci-dribbble

// VKontakte
a(href="#").btn-social.bs-vk
  i.ci-vk

// Odnoklassniki
a(href="#").btn-social.bs-odnoklassniki
  i.ci-odnoklassniki

// Skype
a(href="#").btn-social.bs-skype
  i.ci-skype

Hangouts
a(href="#").btn-social.bs-hangouts
  i.ci-hangouts

// Messenger
a(href="#").btn-social.bs-messenger
  i.ci-messenger

// Viber
a(href="#").btn-social.bs-viber
  i.ci-viber

// Telegram
a(href="#").btn-social.bs-telegram
  i.ci-telegram

// YouTube
a(href="#").btn-social.bs-youtube
  i.ci-youtube

// YouTube outline
a(href="#").btn-social.bs-youtube
  i.ci-youtube-outline

// Vimeo
a(href="#").btn-social.bs-vimeo
  i.ci-vimeo

// WeChat
a(href="#").btn-social.bs-wechat
  i.ci-wechat

// Discord
a(href="#").btn-social.bs-discord
  i.ci-discord

// TikTok
a(href="#").btn-social.bs-tiktok
  i.ci-tiktok

// WhatsApp
a(href="#").btn-social.bs-whatsapp
  i.ci-whatsapp

Type: outline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- WhatsApp -->
<a href="#" class="btn-social bs-outline bs-whatsapp">
  <i class="ci-whatsapp"></i>
</a>
// Facebook
a(href="#").btn-social.bs-outline.bs-facebook
  i.ci-facebook

// Twitter
a(href="#").btn-social.bs-outline.bs-twitter
  i.ci-twitter

// Instagram
a(href="#").btn-social.bs-outline.bs-instagram
  i.ci-instagram

// Google
a(href="#").btn-social.bs-outline.bs-google
  i.ci-google

// LinkedIn
a(href="#").btn-social.bs-outline.bs-linkedin
  i.ci-linkedin

// Pinterest
a(href="#").btn-social.bs-outline.bs-pinterest
  i.ci-pinterest

// Tumblr
a(href="#").btn-social.bs-outline.bs-tumblr
  i.ci-tumblr

// Behance
a(href="#").btn-social.bs-outline.bs-behance
  i.ci-behance

// Dribbble
a(href="#").btn-social.bs-outline.bs-dribbble
  i.ci-dribbble

// VKontakte
a(href="#").btn-social.bs-outline.bs-vk
  i.ci-vk

// Odnoklassniki
a(href="#").btn-social.bs-outline.bs-odnoklassniki
  i.ci-odnoklassniki

// Skype
a(href="#").btn-social.bs-outline.bs-skype
  i.ci-skype

Hangouts
a(href="#").btn-social.bs-outline.bs-hangouts
  i.ci-hangouts

// Messenger
a(href="#").btn-social.bs-outline.bs-messenger
  i.ci-messenger

// Viber
a(href="#").btn-social.bs-outline.bs-viber
  i.ci-viber

// Telegram
a(href="#").btn-social.bs-outline.bs-telegram
  i.ci-telegram

// YouTube
a(href="#").btn-social.bs-outline.bs-youtube
  i.ci-youtube

// YouTube outline
a(href="#").btn-social.bs-outline.bs-youtube
  i.ci-youtube-outline

// Vimeo
a(href="#").btn-social.bs-outline.bs-vimeo
  i.ci-vimeo

// WeChat
a(href="#").btn-social.bs-outline.bs-wechat
  i.ci-wechat

// Discrod
a(href="#").btn-social.bs-outline.bs-discord
  i.ci-discord

// TikTok
a(href="#").btn-social.bs-outline.bs-tiktok
  i.ci-tiktok

// WhatsApp
a(href="#").btn-social.bs-outline.bs-whatsapp
  i.ci-whatsapp

Round shape

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

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

Sizing

<!-- Solid large button -->
<a href="#" class="btn-social bs-dribbble bs-lg">
  <i class="ci-dribbble"></i>
</a>

<!-- Solid medium button -->
<a href="#" class="btn-social bs-dribbble">
  <i class="ci-dribbble"></i>
</a>

<!-- Solid small button -->
<a href="#" class="btn-social bs-dribbble bs-sm">
  <i class="ci-dribbble"></i>
</a>

<!-- Outline large button -->
<a href="#" class="btn-social bs-instagram bs-outline bs-lg">
  <i class="ci-instagram"></i>
</a>

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

<!-- Outline small button -->
<a href="#" class="btn-social bs-instagram bs-outline bs-sm">
  <i class="ci-instagram"></i>
</a>

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

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

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

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

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

<!-- Round outline small button -->
<a href="#" class="btn-social bs-pinterest rounded-circle bs-outline bs-sm">
  <i class="ci-pinterest"></i>
</a>
// Solid large button
a(href="#").btn-social.bs-dribbble.bs-lg
  i.ci-dribbble

// Solid medium button
a(href="#").btn-social.bs-dribbble
  i.ci-dribbble

// Solid small button
a(href="#").btn-social.bs-dribbble.bs-sm
  i.ci-dribbble

// Outline large button
a(href="#").btn-social.bs-instagram.bs-outline.bs-lg
  i.ci-instagram

// Outline medium button
a(href="#").btn-social.bs-instagram.bs-outline
  i.ci-instagram

// Outline small button
a(href="#").btn-social.bs-instagram.bs-outline.bs-sm
  i.ci-instagram

// Round solid large button
a(href="#").btn-social.bs-skype.rounded-circle.bs-lg
  i.ci-skype

// Round solid medium button
a(href="#").btn-social.bs-skype.rounded-circle
  i.ci-skype

// Round solid small button
a(href="#").btn-social.bs-skype.rounded-circle.bs-sm
  i.ci-skype

// Round outline large button
a(href="#").btn-social.bs-pinterest.rounded-circle.bs-outline.bs-lg
  i.ci-pinterest

// Round outline medium button
a(href="#").btn-social.bs-pinterest.rounded-circle.bs-outline
  i.ci-pinterest

// Round outline small button
a(href="#").btn-social.bs-pinterest.rounded-circle.bs-outline.bs-sm
  i.ci-pinterest

Light version

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

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

// Outline light button
a(href="#").btn-social.bs-outline.bs-facebook.bs-light
  i.ci-facebook
Top