necolas / css3-social-signin-buttons

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

CSS3 Social Sign-in Buttons

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

Installation

• Bower: bower install --save necolas/css3-social-signin-buttons
• Download: zip or tar formats.
• Git: git clone git://github.com/necolas/css3-social-signin-buttons.git

Buttons

Default

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>
</a>

Large

To create large buttons include an additional class of large.

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

Supported services

• Facebook
• GitHub
• Google
• OpenID
• Twitter
• Windows Live ID
• Yahoo!

Browser support

• Google Chrome
• Firefox 3.5+
• Safari 4+
• IE 8+
• Opera

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.

License

Public domain: http://unlicense.org

css3-social-signin-buttons's Issues

component support

any plans to add component/bower/npm support?

More obvious hover/focus styles

I love how the GitHub button’s background color changes when you hover/focus the link. For all the other buttons, this effect is much more subtle. Any chance of making the interaction styles for other buttons more obvious?

P.S. I’d love to help with this, but sadly I’m not a designer ;)

Use the new Twitter logo

FB/Twitter buttons just stopped working?

I'm not quite sure what happened (as there hasn't been a commit in 9 months), but it appears that the Facebook and Twitter buttons (even on http://necolas.github.io/css3-social-signin-buttons/) have somehow stopped appearing.

Please support wiredep

Please add a main field in bower.json, to let wiredep automatically inject the css into any project

Thanks.

How about BrowserID?

Maybe it's not "social", but must be in, for the better tomorrow tomorrow.

take inspiration from Google's branding guidelines

https://developers.google.com/+/branding-guidelines#sign-in-button
Looks like these buttons are supposed to be red and white now. /shrug

It would be cool if the CSS could use the Roboto font as well, if its available. Leave the responsibility of loading the Roboto font to downstream users, that way we have a choice (if page-weight is an issue, etc).

Visited link color

My default a:visited rules are taking effect on the buttons and it makes them look bad. Here's the code I had to add:

a.btn-auth:visited {
    color: #222;
}
a.btn-facebook:visited, a.btn-google:visited {
    color: white;
}
a.btn-twitter:visited {
    color: #327695;
}

Facebook hover color can be overridden by default link styling

No hover color is specified, so if my stylesheet defines another default color for hover on links, we have a problem.

Retina image support

Is there any plan for retina image support? I'd be happy to make the necessary CSS updates but recreating all of the assets isn't something I can do.