Fork me on GitHub

CSS3 Social Sign-in Buttons

Standard Buttons

To create the default sign-in button, add a class of btn-auth and btn-[service] (where [service] is one of the supported social sign-in services) to any appropriate element (most likely an anchor).

<a class="btn-auth btn-[service]" href="#">
    Sign in with <b>[service]</b>

Sign in with Facebook

Sign in with Google

Sign in with Yahoo!

Sign in with Windows Live ID

Sign in with OpenID

Larger buttons

To create larger buttons include an additional class of large.

Supported services

Source code

Available on GitHub: necolas/css3-social-signin-buttons

Download it in either zip or tar formats.

Clone the project with Git by running:
$ git clone git://

Browser compatibility

Full support: Google Chrome, Firefox 3.5+, Safari 4+, IE 10+, Opera 11.10+.

Note: Some CSS3 enhancements are not supported in older versions of Opera and IE. The use of icons is not supported in IE 6 or IE 7.


Public domain: