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.
.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');}