Koleksi warna Media Sosial populer.

Post terkait : Koleksi ikon SVG

Warna tombol berbagi Media Sosial

Daftar warna resmi logo / media sosial.

Sorot box warna media sosial yang diinginkan untuk menyalin warna / ikon.

• Facebook
  #3b5999
• Instagram
  linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)
• Twitter
  #00acee
• Pinterest
  #ca2127
• Messenger
  linear-gradient(5deg,#0084ff,#A334FA,#FF6968)
• Whatsapp
  #3fbb50
• Telegram
  #179cde
• Likedin
  #0077b5
• Blogger
  #ff5722
• Tiktok
  linear-gradient(-15deg,#00f2ea,#000000,#fe2c55)
• Snapchat
  #ffe700
• Twitch
  #6441a5
• Tumblr
  #365069
• Youtube
  #f50000
• Dribbble
  #ea4c89
• Skype
  #00aff0
• Vk
  #4a76a8
• Digg
  #1b1a19
• Steam
  linear-gradient(5deg,#0d89bc,#112c5b,#0d1c47)
• Discord
  #7289da
• Quora
  #b92b27
• Reddit
  #ff4500
• Stack Overflow
  #f48024
• Microsoft
  #0067B8
• Soundcloud
  linear-gradient(#ff7400,#ff3400)
• Behance
  #191919
• Codepen
  #000000
• Flipboard
  #f52828
• Delicious
  #0076e8
• Stumbleupon
  #eb4823
• Rss
  #ffc200
• Amazone
  #fe9800
• Apple
  #333333

Icon / logo tombol media sosial

Ikon / logo pada box diatas berformat SVG, dan disematkan melalui CSS sebagai pesudo element (:before).
Cara tersebut kelebihannya adalah, kode HTML tombol menjadi lebih sederhana.
Lihat kode HTML cara penyematan ikon dalam tombol seperti diatas sekaligus penggunaan warnanya melalui tombol dibawah ini.

Lihat HTML  Lihat CSS.

Kode HTML tombol media sosial.

<div class='medsos'>
  <ul class='medsos-bg'>
  <li class='facebook'>
     <a href='https://www.facebook.com?share'>Facebook</a>
     </li>
  <li class='instagram'>
     <a href='https://www.instagram.com?share'>Instagram</a>
     </li>
  <li class='twitter'>
     <a href='https://www.twitter.com?share'>Twitter</a>
     </li>
 </ul>
</div>

Kode CSS tombol media sosial.

Buat kode CSS seperti ini untuk menyematkan ikon sekaligus warna pada masing-masing tombol.

.medsos{
}
/*-- CSS untuk memberi warna --*/
.medsos-bg .facebook{
  background-color: #3b5999;
  }
.medsos-bg .instagram{
  background-color: linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);
  }
.medsos-bg .twitter{
  background-color: #00acee;
  }

/*-- CSS untuk menyematkan ikon --*/
.medsos :before{
  padding-right: 10px;
  vertical-align: middle
  }
.medsos .facebook:before {
  content: url('https://api.iconify.design/fa-brands/facebook-f.svg?color=white&height=20');
  }
.medsos .instagram:before {
  content: url('https://api.iconify.design/fa6-brands/instagram.svg?color=white&height=20');
  }
.medsos .twitter:before {
  content: url('https://api.iconify.design/fa6-brands/twitter.svg?color=white&height=20');
  }

Post terkait :
Koleksi ikon SVG
Kelebihan & Cara kustom ikon SVG

.medsos .blogger:before{content: url('https://api.iconify.design/fa-brands/blogger.svg?color=white&height=20');}

.medsos .apple:before{content: url('https://api.iconify.design/fa-brands/apple.svg?color=white&height=20');}

.medsos .amazon:before{content: url('https://api.iconify.design/fa-brands/amazon.svg?color=white&height=20');}

.medsos .microsoft:before{content: url('https://api.iconify.design/fa-brands/microsoft.svg?color=white&height=20');}

.medsos .facebook:before{content: url('https://api.iconify.design/fa-brands/facebook-f.svg?color=white&height=20');}

.medsos .twitter:before{content: url('https://api.iconify.design/fa6-brands/twitter.svg?color=white&height=20');}

.medsos .rss:before{content: url('https://api.iconify.design/fa-solid/rss.svg?color=white&height=20');}

.medsos .youtube:before{content: url('https://api.iconify.design/fa-brands/youtube.svg?color=white&height=20');}

.medsos .skype:before{content: url('https://api.iconify.design/fa-brands/skype.svg?color=white&height=20');}

.medsos .stumbleupon:before{content: url('https://api.iconify.design/fa-brands/stumbleupon-circle.svg?color=white&height=20');}

.medsos .tumblr:before{content: url('https://api.iconify.design/fa6-brands/tumblr.svg?color=white&height=20');}

.medsos .vk:before{content: url('https://api.iconify.design/fa-brands/vk.svg?color=white&height=20');}

.medsos .stack-overflow:before{content: url('https://api.iconify.design/fa-brands/stack-overflow.svg?color=white&height=20');}

.medsos .github:before{content: url('https://api.iconify.design/fa-brands/github-square.svg?color=white&height=20');}

.medsos .linkedin:before{content: url('https://api.iconify.design/fa6-brands/linkedin-in.svg?color=white&height=20');}

.medsos .dribbble:before{content: url('https://api.iconify.design/fa-brands/dribbble.svg?color=white&height=20');}

.medsos .soundcloud:before{content: url('https://api.iconify.design/fa-brands/soundcloud.svg?color=white&height=20');}

.medsos .behance:before{content: url('https://api.iconify.design/fa-brands/behance-square.svg?color=white&height=20');}

.medsos .digg:before{content: url('https://api.iconify.design/fa-brands/digg.svg?color=white&height=20');}

.medsos .instagram:before{content: url('https://api.iconify.design/fa6-brands/instagram.svg?color=white&height=20');}

.medsos .pinterest:before{content: url('https://api.iconify.design/fa6-brands/pinterest-p.svg?color=white&height=20');}

.medsos .pinterest-p:before{content: url('https://api.iconify.design/fa-brands/pinterest.svg?color=white&height=20');}

.medsos .twitch:before{content: url('https://api.iconify.design/fa-brands/twitch.svg?color=white&height=20');}

.medsos .delicious:before{content: url('https://api.iconify.design/fa-brands/delicious.svg?color=white&height=20');}

.medsos .codepen:before{content: url('https://api.iconify.design/fa-brands/codepen.svg?color=white&height=20');}

.medsos .flipboard:before{content: url('https://api.iconify.design/fa-brands/flipboard.svg?color=white&height=20');}

.medsos .reddit:before{content: url('https://api.iconify.design/fa-brands/reddit-alien.svg?color=white&height=20');}

.medsos .whatsapp:before{content: url('https://api.iconify.design/fa6-brands/whatsapp.svg?color=white&height=20');}

.medsos .messenger:before{content: url('https://api.iconify.design/fa-brands/facebook-messenger.svg?color=white&height=20');}

.medsos .snapchat:before{content: url('https://api.iconify.design/fa-brands/snapchat-square.svg?color=white&height=20');}

.medsos .telegram:before{content: url('https://api.iconify.design/fa-brands/telegram-plane.svg?color=white&height=20');}

.medsos .steam:before{content: url('https://api.iconify.design/fa-brands/steam-square.svg?color=white&height=20');}

.medsos .discord:before{content: url('https://api.iconify.design/fa-brands/discord.svg?color=white&height=20');}

.medsos .quora:before{content: url('https://api.iconify.design/fa-brands/quora.svg?color=white&height=20');}

.medsos .tiktok:before{content: url('https://api.iconify.design/fa-brands/tiktok.svg?color=white&height=20');}

.medsos .share:before{content: url('https://api.iconify.design/fa-solid/share.svg?color=white&height=20');}

.medsos .email:before{content: url('https://api.iconify.design/fa-solid/envelope.svg?color=white&height=20');}

.medsos .external-link:before{content: url('https://api.iconify.design/fa-solid/external-link-alt.svg?color=white&height=20');}

.medsos .blogger:before{content: url('https://api.iconify.design/fa-brands/blogger.svg?color=white&height=20');} .medsos .apple:before{content: url('https://api.iconify.design/fa-brands/apple.svg?color=white&height=20');} .medsos .amazon:before{content: url('https://api.iconify.design/fa-brands/amazon.svg?color=white&height=20');} .medsos .microsoft:before{content: url('https://api.iconify.design/fa-brands/microsoft.svg?color=white&height=20');} .medsos .facebook:before{content: url('https://api.iconify.design/fa-brands/facebook-f.svg?color=white&height=20');} .medsos .facebook-f:before{content: url('https://api.iconify.design/fa-brands/facebook-f.svg?color=white&height=20');} .medsos .twitter:before{content: url('https://api.iconify.design/fa6-brands/twitter.svg?color=white&height=20');} .medsos .rss:before{content: url('https://api.iconify.design/fa-solid/rss.svg?color=white&height=20');} .medsos .youtube:before{content: url('https://api.iconify.design/fa-brands/youtube.svg?color=white&height=20');} .medsos .skype:before{content: url('https://api.iconify.design/fa-brands/skype.svg?color=white&height=20');} .medsos .stumbleupon:before{content: url('https://api.iconify.design/fa-brands/stumbleupon-circle.svg?color=white&height=20');} .medsos .tumblr:before{content: url('https://api.iconify.design/fa6-brands/tumblr.svg?color=white&height=20');} .medsos .vk:before{content: url('https://api.iconify.design/fa-brands/vk.svg?color=white&height=20');} .medsos .stack-overflow:before{content: url('https://api.iconify.design/fa-brands/stack-overflow.svg?color=white&height=20');} .medsos .github:before{content: url('https://api.iconify.design/fa-brands/github-square.svg?color=white&height=20');} .medsos .linkedin:before{content: url('https://api.iconify.design/fa6-brands/linkedin-in.svg?color=white&height=20');} .medsos .dribbble:before{content: url('https://api.iconify.design/fa-brands/dribbble.svg?color=white&height=20');} .medsos .soundcloud:before{content: url('https://api.iconify.design/fa-brands/soundcloud.svg?color=white&height=20');} .medsos .behance:before{content: url('https://api.iconify.design/fa-brands/behance-square.svg?color=white&height=20');} .medsos .digg:before{content: url('https://api.iconify.design/fa-brands/digg.svg?color=white&height=20');} .medsos .instagram:before{content: url('https://api.iconify.design/fa6-brands/instagram.svg?color=white&height=20');} .medsos .pinterest:before{content: url('https://api.iconify.design/fa6-brands/pinterest-p.svg?color=white&height=20');} .medsos .pinterest-p:before{content: url('https://api.iconify.design/fa-brands/pinterest.svg?color=white&height=20');} .medsos .twitch:before{content: url('https://api.iconify.design/fa-brands/twitch.svg?color=white&height=20');} .medsos .delicious:before{content: url('https://api.iconify.design/fa-brands/delicious.svg?color=white&height=20');} .medsos .codepen:before{content: url('https://api.iconify.design/fa-brands/codepen.svg?color=white&height=20');} .medsos .flipboard:before{content: url('https://api.iconify.design/fa-brands/flipboard.svg?color=white&height=20');} .medsos .reddit:before{content: url('https://api.iconify.design/fa-brands/reddit-alien.svg?color=white&height=20');} .medsos .whatsapp:before{content: url('https://api.iconify.design/fa6-brands/whatsapp.svg?color=white&height=20');} .medsos .messenger:before{content: url('https://api.iconify.design/fa-brands/facebook-messenger.svg?color=white&height=20');} .medsos .snapchat:before{content: url('https://api.iconify.design/fa-brands/snapchat-square.svg?color=white&height=20');} .medsos .telegram:before{content: url('https://api.iconify.design/fa-brands/telegram-plane.svg?color=white&height=20');} .medsos .steam:before{content: url('https://api.iconify.design/fa-brands/steam-square.svg?color=white&height=20');} .medsos .discord:before{content: url('https://api.iconify.design/fa-brands/discord.svg?color=white&height=20');} .medsos .quora:before{content: url('https://api.iconify.design/fa-brands/quora.svg?color=white&height=20');} .medsos .tiktok:before{content: url('https://api.iconify.design/fa-brands/tiktok.svg?color=white&height=20');} .medsos .share:before{content: url('https://api.iconify.design/fa-solid/share.svg?color=white&height=20');} .medsos .email:before{content: url('https://api.iconify.design/fa-solid/envelope.svg?color=white&height=20');} .medsos .external-link:before{content: url('https://api.iconify.design/fa-solid/external-link-alt.svg?color=white&height=20');}

⇐ Sebelumnya

Selanjutnya ⇒