Around Buy now

Social buttons

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

Around component

Type: solid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Trello -->
<a href="#" class="btn-social bs-trello">
  <i class="ai-trello"></i>
</a>

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

<!-- RSS -->
<a href="#" class="btn-social bs-rss">
  <i class="ai-rss"></i>
</a>
// Facebook
a(href="#").btn-social.bs-facebook
  i.ai-facebook

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Figma
a(href="#").btn-social.bs-figma
  i.ai-figma

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

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

// GitHub
a(href="#").btn-social.bs-github
  i.ai-github

// GitLab
a(href="#").btn-social.bs-gitlab
  i.ai-gitlab

// PayPal
a(href="#").btn-social.bs-paypal
  i.ai-paypal

// Slack
a(href="#").btn-social.bs-slack
  i.ai-slack

// Trello
a(href="#").btn-social.bs-trello
  i.ai-trello

// Twitch
a(href="#").btn-social.bs-twitch
  i.ai-twitch

// RSS
a(href="#").btn-social.bs-rss
  i.ai-rss

Type: outline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Trello -->
<a href="#" class="btn-social bs-outline bs-trello">
  <i class="ai-trello"></i>
</a>

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

<!-- RSS -->
<a href="#" class="btn-social bs-outline bs-rss">
  <i class="ai-rss"></i>
</a>
// Facebook
a(href="#").btn-social.bs-outline.bs-facebook
  i.ai-facebook

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Figma
a(href="#").btn-social.bs-outline.bs-figma
  i.ai-figma

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

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

// GitHub
a(href="#").btn-social.bs-outline.bs-github
  i.ai-github

// GitLab
a(href="#").btn-social.bs-outline.bs-gitlab
  i.ai-gitlab

// PayPal
a(href="#").btn-social.bs-outline.bs-paypal
  i.ai-paypal

// Slack
a(href="#").btn-social.bs-outline.bs-slack
  i.ai-slack

// Trello
a(href="#").btn-social.bs-outline.bs-trello
  i.ai-trello

// Twitch
a(href="#").btn-social.bs-outline.bs-twitch
  i.ai-twitch

// RSS
a(href="#").btn-social.bs-outline.bs-rss
  i.ai-rss

Round shape

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

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

Sizing

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Light version

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

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

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