Hacker News new | past | comments | ask | show | jobs | submit login
CSS3 Social Sign-in Buttons (nicolasgallagher.com)
70 points by necolas on Nov 21, 2011 | hide | past | favorite | 11 comments



I don't think it's a good idea (I think it's opposite of that) to use not yet closed parts of css3 specification in production. I mean, it's ok as long as it works without it. This code is full of vendor specific prefixes. They only add in size and many of them doesn't have reliable fallback.

Also, these buttons look close to horrible (as in unreadable) in browsers that doesn't support all features used. I only tried quite capable Konqueror but I'm affraid what would they look like in IE7. Another thing is that this is 16kB (uncompressed). 16kB for social sharing buttons that doesn't really stand out that much (as opposed to css(2)-styled buttons) and add no extra functionality to the user.

So, please, think twice before using them.


There are fallbacks in place for all the gradients. They look fine in IE7. The compressed size of the code is more relevant than uncompressed.


Then, I would change Yahoo one and Github - http://i.imgur.com/HRN0f.png (I'm hovering over the github one). Google doesn't look so well either.


These are nice, but you should also check these out as well https://github.com/adamstac/zocial ... homepage here: http://zocialbuttons.com/ ... there are MANY https://github.com/adamstac/zocial/blob/master/stylesheets/p...


Thank you for sharing this, much better solution!


For Facebook, Twitter, GitHub, Google, Yahoo!, Windows Live ID, OpenID.

Includes icons and two sizes of button.

This code formed the basis of the sign-in buttons I used on this UK deal-sharing website: http://www.oodeals.co.uk/login


Thanks for taking the time to share this.


I don't often tweet blogs, but have done today. These buttons are beautiful.

Not entirely sure about the Google one - doesn't look quite as good as the others...


I was aiming to mimic any existing native sign-in or UI buttons styles for the service in the hope of providing some visual familiarity for visitors who have experience with any particular provider.

The Google one borrows from their new button styles and their flat-color favicon...but it could possibly be improved. Open to design suggestions. Thanks!


These are great! I'm looking for a good foursquare button as well.


Why are they all sized differently if they have standard sizes?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: