Zocial CSS3 Buttons

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!)

bobwaycott• 14 years ago

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

http://cl.ly/2C3u0l053r0Q2j201t37

samcollins3• 14 years ago

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.

Kenan• 14 years ago

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

oldstrangers• 14 years ago

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.

d0vs• 14 years ago

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

paul9290• 14 years ago

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

lukifer• 14 years ago

Bookmarked for future use. Nice work.

Side note: IE5?!

sbisker• 14 years ago

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.)

RandallBrown• 14 years ago

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

cfontes• 14 years ago

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.

godDLL• 14 years ago

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.

NinetyNine• 14 years ago

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

http://stackoverflow.com/a/7291538

joshontheweb• 14 years ago

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... :/

sherwin• 14 years ago

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

dangrossman• 14 years ago

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...

alpb• 14 years ago

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?

samcollins3• 14 years ago

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.

Zocial CSS3 Buttons

Related Stories