keyboard_double_arrow_left
help Help & getting started

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);