8 ms·

Zocial CSS3 Buttons

83 points by semanticist 15y ago

latchkey 15y ago
This is really well done and funny. You missed one... https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site https://github.com/mozilla/browserid/wiki/How-to-Use-Browser...
shaka881 15y ago
OpenID in the same category of IE5. Ouch. That hurts.
- samcollins 15y ago
  personal bias, sorry :-)
sergioramos 15y ago
The G+ square icon is higher than the others
ten7 15y ago
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 https://ten7.litmus.com/pub/adfdb99
- ten7 15y ago
  Oh, and in Safari there are no icons.
  - semanticist 15y ago
    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!)
    - ten7 15y ago
      Just checked it myself, looks like it's missing on OS X Lion. Are you on Windows?
    - ten7 15y ago
      Sorry, I really screwed up with that one. Totally typo'd that one.
  - bobwaycott 15y ago
    They show up just fine in Safari on OS X Lion here. http://cl.ly/2C3u0l053r0Q2j201t37 http://cl.ly/2C3u0l053r0Q2j201t37
    - ten7 15y ago
      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 https://ten7.litmus.com/pub/adfdb99/results#saf4m-full
  - samcollins 15y ago
    Screenshots in Safari just captured the FOUT (http://paulirish.com/2009/fighting-the-font-face-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.
    - ten7 15y ago
      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 :(
- Kenan 15y ago
  On Internet Explorer 9.0.8112.16421 64-bit, on Windows 7 Ultimate 64-bit: http://cl.ly/DhzK http://cl.ly/DhzK And icons: http://cl.ly/Dhua http://cl.ly/Dhua
oldstrangers 15y 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 15y ago
  Not to mention that they're bigger than all the others.
paul9290 15y ago
Great work! I'm going to use some on my site. Thanks!
lukifer 15y ago
Bookmarked for future use. Nice work. Side note: IE5?!
sbisker 15y 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 15y ago
Since when is LinkedIn one of the popular kids? Or Google+ for that matter? Well done buttons though.
cfontes 15y 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 15y 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 15y ago
  Not anymore, Chrome / Firefox decided it was a security hazard. http://stackoverflow.com/a/7291538 http://stackoverflow.com/a/7291538
joshontheweb 15y 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 15y ago
These are really cool! Can someone explain to me how the icons are done in CSS only?
- dangrossman 15y 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/type/zocial-regular-webfont.svg https://github.com/samcollins/css-social-buttons/blob/master...
alpb 15y 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?
- samcollins 15y 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.

83 points by semanticist 15y ago

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

shaka881 15y ago

OpenID in the same category of IE5. Ouch. That hurts.

samcollins 15y ago
personal bias, sorry :-)

sergioramos 15y ago

The G+ square icon is higher than the others

ten7 15y ago

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 https://ten7.litmus.com/pub/adfdb99

ten7 15y ago
Oh, and in Safari there are no icons.
- semanticist 15y ago
  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!)
  - ten7 15y ago
    Just checked it myself, looks like it's missing on OS X Lion. Are you on Windows?
  - ten7 15y ago
    Sorry, I really screwed up with that one. Totally typo'd that one.
- bobwaycott 15y ago
  They show up just fine in Safari on OS X Lion here. http://cl.ly/2C3u0l053r0Q2j201t37 http://cl.ly/2C3u0l053r0Q2j201t37
  - ten7 15y ago
    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 https://ten7.litmus.com/pub/adfdb99/results#saf4m-full
- samcollins 15y ago
  Screenshots in Safari just captured the FOUT (http://paulirish.com/2009/fighting-the-font-face-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.
  - ten7 15y ago
    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 :(
Kenan 15y ago
On Internet Explorer 9.0.8112.16421 64-bit, on Windows 7 Ultimate 64-bit: http://cl.ly/DhzK http://cl.ly/DhzK And icons: http://cl.ly/Dhua http://cl.ly/Dhua

oldstrangers 15y 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 15y ago
Not to mention that they're bigger than all the others.

paul9290 15y ago

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

lukifer 15y ago

Bookmarked for future use. Nice work. Side note: IE5?!

sbisker 15y 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 15y ago

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

cfontes 15y 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 15y 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 15y ago
Not anymore, Chrome / Firefox decided it was a security hazard. http://stackoverflow.com/a/7291538 http://stackoverflow.com/a/7291538

joshontheweb 15y 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 15y ago

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

dangrossman 15y 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/type/zocial-regular-webfont.svg https://github.com/samcollins/css-social-buttons/blob/master...

alpb 15y 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?

samcollins 15y 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.