Social sign-in buttons with css
Pull request Compare This branch is 147 commits behind smcllns:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Zocial CSS social buttons

I basically rewrote this entire set so they are full vector buttons, meaning:

  • @font-face icons
  • custom font file for all social icons
  • em sizing based on button font-size
  • support for about 44 different services
  • buttons and icons supported
  • no raster images (sweet)
  • works splendidly on any browser supporting @font-face
  • CSS3 degrades gracefully in IE8 and below etc.

How to use these buttons:

<button class='zocial facebook'>
    <span>Button label here</span>
  • Parent element can be any element e.g. a, div, button etc.
  • Must contain child span element
  • Add class of .zocial to parent element
  • Add class for name of service e.g. .dropbox, .twitter, .github
  • Done :-)

Check out for demo and code examples.

Problems or questions to @smcllns