keyboard_double_arrow_left

Social Colors.
Enhance your UI with social media-inspired color utilities for backgrounds, links, and buttons. These custom classes allow you to style elements with brand-specific colors for popular platforms, ensuring a visually engaging and recognizable design.
Background Color
Elevate Your UI with Social-Powered Colors.
Facebook
Twitter
Youtube
Linkedin
Instagram
Pinterest
Google
Snapchat
Whatsapp
Tumblr
Reddit
Spotify
Yahoo
Dribbble
Skype
Vimeo
Drive
Envato
Flickr
Photo
Dropbox
Apple
Behance
<div class="bg-facebook p-2 text-white text-center">Facebook</div>
<div class="bg-twitter p-2 text-white text-center">Twitter</div>
<div class="bg-youtube p-2 text-white text-center">Youtube</div>
<div class="bg-linkedin p-2 text-white text-center">Linkedin</div>
<div class="bg-instagram p-2 text-white text-center">Instagram</div>
<div class="bg-pinterest p-2 text-white text-center">Pinterest</div>
<div class="bg-google p-2 text-white text-center">Google</div>
<div class="bg-snapchat p-2 text-black text-center">Snapchat</div>
<div class="bg-whatsapp p-2 text-white text-center">Whatsapp</div>
<div class="bg-tumblr p-2 text-white text-center">Tumblr</div>
<div class="bg-facebook p-2 text-white text-center">Reddit</div>
<div class="bg-spotify p-2 text-white text-center">Spotify</div>
<div class="bg-yahoo p-2 text-white text-center">Yahoo</div>
<div class="bg-dribbble p-2 text-white text-center">Dribbble</div>
<div class="bg-skype p-2 text-white text-center">Skype</div>
<div class="bg-vimeo p-2 text-white text-center">Vimeo</div>
<div class="bg-drive p-2 text-white text-center">Drive</div>
<div class="bg-envato p-2 text-white text-center">Envato</div>
<div class="bg-flickr p-2 text-white text-center">Flickr</div>
<div class="bg-photo p-2 text-white text-center">Photo</div>
<div class="bg-dropbox p-2 text-white text-center">Dropbox</div>
<div class="bg-apple p-2 text-white text-center">Apple</div>
<div class="bg-behance p-2 text-white text-center">Behance</div>
Link Color
You can use the .link-*
& .text-*
classes to colorize links.
<a href="javascript:void(0);" class="link-facebook">Facebook</a>
<a href="javascript:void(0);" class="link-twitter">Twitter</a>
<a href="javascript:void(0);" class="link-youtube">Youtube</a>
<a href="javascript:void(0);" class="link-linkedin">Linkedin</a>
<a href="javascript:void(0);" class="link-instagram">Instagram</a>
<a href="javascript:void(0);" class="link-pinterest">Pinterest</a>
<a href="javascript:void(0);" class="link-google">Google</a>
<a href="javascript:void(0);" class="link-snapchat">Snapchat</a>
<a href="javascript:void(0);" class="link-whatsapp">Whatsapp</a>
<a href="javascript:void(0);" class="link-tumblr">Tumblr</a>
<a href="javascript:void(0);" class="link-reddit">Reddit</a>
<a href="javascript:void(0);" class="link-spotify">Spotify</a>
<a href="javascript:void(0);" class="link-yahoo">Yahoo</a>
<a href="javascript:void(0);" class="link-dribbble">Dribbble</a>
<a href="javascript:void(0);" class="link-skype">Skype</a>
<a href="javascript:void(0);" class="link-vimeo">Vimeo</a>
<a href="javascript:void(0);" class="link-drive">Drive</a>
<a href="javascript:void(0);" class="link-envato">Envato</a>
<a href="javascript:void(0);" class="link-flickr">Flickr</a>
<a href="javascript:void(0);" class="link-photo">Photo</a>
<a href="javascript:void(0);" class="link-dropbox">Dropbox</a>
<a href="javascript:void(0);" class="link-apple">Apple</a>
<a href="javascript:void(0);" class="link-behance">Behance</a>
<span class="text-facebook">Facebook</span>
<span class="text-twitter">Twitter</span>
<span class="text-youtube">Youtube</span>
<span class="text-linkedin">Linkedin</span>
<span class="text-instagram">Instagram</span>
<span class="text-pinterest">Pinterest</span>
<span class="text-google">Google</span>
<span class="text-snapchat">Snapchat</span>
<span class="text-whatsapp">Whatsapp</span>
<span class="text-tumblr">Tumblr</span>
<span class="text-reddit">Reddit</span>
<span class="text-spotify">Spotify</span>
<span class="text-yahoo">Yahoo</span>
<span class="text-dribbble">Dribbble</span>
<span class="text-skype">Skype</span>
<span class="text-vimeo">Vimeo</span>
<span class="text-drive">Drive</span>
<span class="text-envato">Envato</span>
<span class="text-flickr">Flickr</span>
<span class="text-photo">Photo</span>
<span class="text-dropbox">Dropbox</span>
<span class="text-apple">Apple</span>
<span class="text-behance">Behance</span>
Buttons
You can use the .btn-*
& .btn-outline-*
classes to colorize buttons.
<button type="button" class="btn btn-facebook w-100">Facebook</button>
<button type="button" class="btn btn-twitter w-100">Twitter</button>
<button type="button" class="btn btn-youtube w-100">Youtube</button>
<button type="button" class="btn btn-linkedin w-100">Linkedin</button>
<button type="button" class="btn btn-instagram w-100">Instagram</button>
<button type="button" class="btn btn-pinterest w-100">Pinterest</button>
<button type="button" class="btn btn-google w-100">Google</button>
<button type="button" class="btn btn-snapchat w-100">Snapchat</button>
<button type="button" class="btn btn-whatsapp w-100">Whatsapp</button>
<button type="button" class="btn btn-tumblr w-100">Tumblr</button>
<button type="button" class="btn btn-reddit w-100">Reddit</button>
<button type="button" class="btn btn-spotify w-100">Spotify</button>
<button type="button" class="btn btn-yahoo w-100">Yahoo</button>
<button type="button" class="btn btn-dribbble w-100">Dribbble</button>
<button type="button" class="btn btn-skype w-100">Skype</button>
<button type="button" class="btn btn-vimeo w-100">Vimeo</button>
<button type="button" class="btn btn-drive w-100">Drive</button>
<button type="button" class="btn btn-envato w-100">Envato</button>
<button type="button" class="btn btn-flickr w-100">Flickr</button>
<button type="button" class="btn btn-photo w-100">Photo</button>
<button type="button" class="btn btn-dropbox w-100">Dropbox</button>
<button type="button" class="btn btn-apple w-100">Apple</button>
<button type="button" class="btn btn-behance w-100">Behance</button>
Sass variables
scss/abstracts/_variable.scss
$social-colors: map-merge((
"facebook": $facebook,
"twitter": $twitter,
"youtube": $youtube,
"linkedin": $linkedin,
"instagram": $instagram,
"pinterest": $pinterest,
"google": $google,
"snapchat": $snapchat,
"whatsapp": $whatsapp,
"tumblr": $tumblr,
"reddit": $reddit,
"spotify": $spotify,
"yahoo": $yahoo,
"dribbble": $dribbble,
"skype": $skype,
"vimeo": $vimeo,
"flickr": $flickr,
"envato": $envato,
"drive": $drive,
"photo": $photo,
"dropbox": $dropbox,
"behance": $behance,
"apple": $apple),
$social-colors);