Cartzilla Buy now

Social buttons

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

Cartzilla component

Type: solid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- WeChat -->
<a href="#" class="social-btn sb-wechat">
  <i class="czi-wechat"></i>
</a>
// Facebook
a(href="#").social-btn.sb-facebook
  i.czi-facebook

// Twitter
a(href="#").social-btn.sb-twitter
  i.czi-twitter

// Instagram
a(href="#").social-btn.sb-instagram
  i.czi-instagram

// Google
a(href="#").social-btn.sb-google
  i.czi-google

// LinkedIn
a(href="#").social-btn.sb-linkedin
  i.czi-linkedin

// Pinterest
a(href="#").social-btn.sb-pinterest
  i.czi-pinterest

// Tumblr
a(href="#").social-btn.sb-tumblr
  i.czi-tumblr

// Behance
a(href="#").social-btn.sb-behance
  i.czi-behance

// Dribbble
a(href="#").social-btn.sb-dribbble
  i.czi-dribbble

// VKontakte
a(href="#").social-btn.sb-vk
  i.czi-vk

// Odnoklassniki
a(href="#").social-btn.sb-odnoklassniki
  i.czi-odnoklassniki

// Skype
a(href="#").social-btn.sb-skype
  i.czi-skype

Hangouts
a(href="#").social-btn.sb-hangouts
  i.czi-hangouts

// Messenger
a(href="#").social-btn.sb-messenger
  i.czi-messenger

// Viber
a(href="#").social-btn.sb-viber
  i.czi-viber

// Telegram
a(href="#").social-btn.sb-telegram
  i.czi-telegram

// YouTube
a(href="#").social-btn.sb-youtube
  i.czi-youtube

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

// Vimeo
a(href="#").social-btn.sb-vimeo
  i.czi-vimeo

// WeChat
a(href="#").social-btn.sb-wechat
  i.czi-wechat

Type: outline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- WeChat -->
<a href="#" class="social-btn sb-outline sb-wechat">
  <i class="czi-wechat"></i>
</a>
// Facebook
a(href="#").social-btn.sb-outline.sb-facebook
  i.czi-facebook

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

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

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

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

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

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

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

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

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

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

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

Hangouts
a(href="#").social-btn.sb-outline.sb-hangouts
  i.czi-hangouts

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

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

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

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

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

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

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

Round shape

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

<!-- Round outline button -->
<a href="#" class="social-btn sb-round sb-outline sb-facebook">
  <i class="czi-facebook"></i>
</a>
// Round solid button
a(href="#").social-btn.sb-round.sb-facebook
  i.czi-facebook
// Round outline button
a(href="#").social-btn.sb-round.sb-outline.sb-facebook
  i.czi-facebook

Sizing

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

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

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

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

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

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

<!-- Round solid large button -->
<a href="#" class="social-btn sb-skype sb-round sb-lg">
  <i class="czi-skype"></i>
</a>

<!-- Round solid medium button -->
<a href="#" class="social-btn sb-skype sb-round">
  <i class="czi-skype"></i>
</a>

<!-- Round solid small button -->
<a href="#" class="social-btn sb-skype sb-round sb-sm">
  <i class="czi-skype"></i>
</a>

<!-- Round outline large button -->
<a href="#" class="social-btn sb-pinterest sb-round sb-outline sb-lg">
  <i class="czi-pinterest"></i>
</a>

<!-- Round outline medium button -->
<a href="#" class="social-btn sb-pinterest sb-round sb-outline">
  <i class="czi-pinterest"></i>
</a>

<!-- Round outline small button -->
<a href="#" class="social-btn sb-pinterest sb-round sb-outline sb-sm">
  <i class="czi-pinterest"></i>
</a>
// Solid large button
a(href="#").social-btn.sb-dribbble.sb-lg
  i.czi-dribbble

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

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

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

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

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

// Round solid large button
a(href="#").social-btn.sb-skype.sb-round.sb-lg
  i.czi-skype

// Round solid medium button
a(href="#").social-btn.sb-skype.sb-round
  i.czi-skype

// Round solid small button
a(href="#").social-btn.sb-skype.sb-round.sb-sm
  i.czi-skype

// Round outline large button
a(href="#").social-btn.sb-pinterest.sb-round.sb-outline.sb-lg
  i.czi-pinterest

// Round outline medium button
a(href="#").social-btn.sb-pinterest.sb-round.sb-outline
  i.czi-pinterest

// Round outline small button
a(href="#").social-btn.sb-pinterest.sb-round.sb-outline.sb-sm
  i.czi-pinterest

Light version

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

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

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