Zocial CSS3 Buttons | Hacker News Reader

Zocial CSS3 Buttons

zocial.smcllns.com

83 pointssemanticist28 comments

I dont understand the g+ button... no reason at all for the rainbow above it. I want consistency in my buttons and this needlessly breaks that.

Not to mention that they're bigger than all the others.

This is really well done and funny. You missed one... https://github.com/mozilla/browserid/wiki/How-to-Use-Browser...

OpenID in the same category of IE5.

Ouch.

That hurts.

personal bias, sorry :-)

Am I the only one whose eyes are really hurt by the brightness of the colors chosen here? (Seriously, I may be the only one - they do seem a little unnecessarily bright, but I've also been feeling tired today.)

Looks crappy in every version of Internet Explorer, 6 through 9. Is it shocking that IE doesn't place nicely? https://ten7.litmus.com/pub/adfdb99

Oh, and in Safari there are no icons.

I use Safari as my main browser, and it displayed the icons correctly. (Or I probably wouldn't've posted it, since I only found it and didn't make it!)

Just checked it myself, looks like it's missing on OS X Lion. Are you on Windows?

Sorry, I really screwed up with that one. Totally typo'd that one.

They show up just fine in Safari on OS X Lion here.

http://cl.ly/2C3u0l053r0Q2j201t37

Sorry, I screwed up. Yes, it looks ok on OS X, that's what I'm on. Looks like it's missing on Safari but that could just be a time to load thing? Not sure: https://ten7.litmus.com/pub/adfdb99/results#saf4m-full

Screenshots in Safari just captured the FOUT (http://paulirish.com/2009/fighting-the-font-face-fout/). Not sure I'm totally convinced about those IE8 + IE9 screenshots - I've tested those and 9 is pretty good, 8 is a bit lame and anything below 8 is appalling. What version of Windows was that?

It really takes the fun out of a project like this to make it not die in IE.

I just looked at in on a Win7 VirtualBox machine running IE 8 and it looked like the Litmus screenshot. I am convinced it looked bad, not surprised, but certainly sad :(

On Internet Explorer 9.0.8112.16421 64-bit, on Windows 7 Ultimate 64-bit: http://cl.ly/DhzK

And icons: http://cl.ly/Dhua

I think these are great. Can't really use them in production until it works in latest IE at least. Absolutely love how they are scalable. Oh Internet Explorer... :/

Is there a reliable way to fish out whether a user's browser has been to any of those recently? I wouldn't put up a single UI element on the page that doesn't help the user in some way, let alone a bucketful of them.

Not anymore, Chrome / Firefox decided it was a security hazard.

http://stackoverflow.com/a/7291538

It is not compatible with Bootstrap.css of Twitter. When both are running, a:hover creates a white underline below the button text and I couldn't really figure out how to get rid of it. Does anyone know?

This is fixed in the latest version. Alternatively you could just ensure zocial.css is the referenced below bootstrap.css to make sure it takes priority on styling.

I don't know why but I am using those and can't get the SVGs to work on icons... I only get T for twitter and R for RSS.

The G+ square icon is higher than the others

Since when is LinkedIn one of the popular kids? Or Google+ for that matter? Well done buttons though.

These are really cool! Can someone explain to me how the icons are done in CSS only?

The author created a font with each icon as a glyph (letter) in that font. Modern web browsers can load a font file referenced by URL in the stylesheet, which is what he's done. It won't work in older browsers.

https://github.com/samcollins/css-social-buttons/blob/master...

Bookmarked for future use. Nice work.

Side note: IE5?!

Great work! I'm going to use some on my site. Thanks!

Reply on news.ycombinator.com