/social-circles

Well designed social media buttons.

Primary LanguageCSSMIT LicenseMIT

Social circles

Preview

Well designed social media buttons that are simple to use, just work and look good. Give them a try at http://janhuenermann.github.io/social-circles/

For feature requests please create an issue.

Features

  • Well designed brand icons and logos each with their specific colors
  • Vector graphics loaded as font for fast loading and easy scaling
  • Just about 5kb size
  • Animations and custom designs specified per class
  • No more than one line per button
  • 13 different networks with over 75 button variations

ToDo: SASS support

How to use

Just copy the /fonts and /css directories to your root directory of your web application. Then embed the css file /css/social-buttons.min.css in your main html file with the following code snippet

<link rel="stylesheet" href="../css/social-circles.min.css">

To create a button add the class 'social-button' to your anchors (a) and add the class of the social network you want the button to be, look at the table below. Now choose a button type, add it as a class and you're done. Congratulations, you've added your first social media button! For everybody who could not follow this text, here are a few examples:

<a class="icon-twitter social-button color" href="http://twitter.com/username"></a>
<a class="icon-instagram social-button grey" href="http://instagram.com/username"></a>
<a class="icon-rss social-button borderless static" href="http://yoursite.com/rss"></a>

Icons

Social network Class Brand color
Facebook icon-facebook #3b5998
Twitter icon-twitter #4dc8f1
Instagram icon-instagram #3e739d
Behance icon-behance #0683f1
Vimeo icon-vimeo #86c9ef
Youtube icon-youtube #ce332d
Google+ icon-googleplus #d13f2d
RSS icon-rss #f88b02
Pinterest icon-pinterest #cb2028
Tumblr icon-tumblr #274152
LinkedIn icon-linkedin #0275b5
Skype icon-skype #03aceb
Github icon-github #4183C4
Dribbble icon-dribbble #ea4c89

Button types

'color' buttons are transparent but turn into the color of their brand when you hover over them with your mouse.

'grey' buttons are just grey. When you hover over them they jump up.

'borderless' buttons are just plain icons that will get their brand color on hover.

Additional options

'no-animation' turns off all animations.

'static' turns off all custom behaviour when the user tries to interact with the buttons, for example hovering.

If you wish to alter size, change the font-size of the buttons you want to change size of.

Acknowledgements

Original icons are created by Daniel Oppel and you find them on dribbble (https://dribbble.com/shots/1509889-Free-Social-Media-Icons). I put them into a font file to make them accessible for web browsers.