Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Free CSS Buttons Set Free Zocial Button Set: Social CSS3 Buttons

The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.

The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.

No raster images or sprites were used. Instead, vector icons were inserted using a custom font file, an @font-face rule and pseudo elements. For more information, John Hicks has an informative write-up1 on this technique.

Download The Button Set For Free Link

This button set is free to use and extend, personally or commercially. No attribution is required.

Features Link

  • 100%-vector CSS3 buttons
  • @font-face icons and custom font files
  • 72 services supported
  • Button and icon versions supported
  • Em sizing for full scalability
  • Generic primary and secondary action buttons for consistency
  • Graceful degradation on older browsers

Preview Link

Screenshots of each set are below. Or view a live demo7.

8

9

10

11

12

13

14

15

16

Usage Link

The button set was designed with simplicity and semantics in mind. No unnecessary or extra markup is required, and button types are called through class names. Call the zocial.css file on your page (make sure the font files and the zocial.css file are in the same directory). Buttons can be displayed with the following markup:

<button class="zocial facebook">Sign in with Facebook</button>

The parent element is agnostic, so you may use <a>, <div> or <button>, but it must contain a child <span> element. [Thanks, Lea17!]

To choose buttons from the set, include the appropriate class name for the service, such as .dropbox, .linkedin or .twitter.

Icon versions can be displayed by including an extra .icon class, as follows:

<a class="zocial quora icon">Follow me on Quora</a>

More code samples are available on the Zocial page18.

(al)

Footnotes Link

  1. 1 http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2012/02/Zocial-CSS3-Buttons-full-screenshot.png
  3. 3 http://zocial.smcllns.com/sample.html
  4. 4 http://github.com/samcollins/css-social-buttons
  5. 5 https://github.com/adamstac/zocial
  6. 6 https://twitter.com/adamstac
  7. 7 http://zocial.smcllns.com/sample.html
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-11.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-21.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-31.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-41.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-51.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-61.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-71.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-81.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-91.png
  17. 17 http://twitter.com/LeaVerou
  18. 18 http://zocial.smcllns.com
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sam Collins is the co-founder and Chief Product Nerd at Eventasaurus, a productivity dashboard for event organisers and planners. He is also the Editor at MindTheProduct, a blog for product managers. You can follow him on twitter at @smcllns.

  1. 1

    Do my eyes deceive me, or is there really no Flickr button included in this set???

    0
  2. 2

    Cool concept, that’s easy to use. But I really don’t get it how the icons quality can be so bad.

    0
  3. 3

    Patrick Samphire

    May 15, 2012 5:48 am

    Very nice. I do like these. Obviously, we could all suggest other ones that would be awesome to add, but this is a pretty good selection. Nice to see Pinterest in there, for instance.

    0
  4. 4

    Interesting.
    If you’re taking requests: Flickr, OpenTable, and a Print button would be useful.
    Google + is one of the popular kids? I had them as the nosey-but-have-to-invite-kids. ; ]

    0
  5. 5

    Nice set ! Just two things: Why the heck is Paypal on orange background and why the Chrome icons all white ? Hardly recognizable … +1 for Flickr too and maybe some others, but that does not matter.

    0
  6. 6

    Roman Nurik

    May 15, 2012 10:10 am

    May want to update the “Android Market” button and icon to “Google Play” — http://www.android.com/developers/branding.html

    0
  7. 7

    Carlo Rizzante

    May 15, 2012 11:23 am

    Some are great!
    Thanks for sharing, and inspiring.

    0
  8. 8

    Gerd Wippich

    May 15, 2012 12:28 pm

    Thanks a lot ! I would like to see a Delicious icon, it should almost be easy to get this coded in CSS3, compared to the more complex ones :-D

    0
  9. 9

    No Reddit or Digg buttons? I see those two in the “social toolbar” of more web sites and articles than so many of these.

    0
  10. 10

    Sam Collins

    May 15, 2012 4:15 pm

    Thanks for all the kind words! I see a few people requesting support for Flickr, Digg etc — just so you know — the font file is already prepared for these (see: http://a.smcllns.com/Gf3N) but not all of the buttons have been created yet. Keep an eye on the github repo and I’ll update the set with some of the buttons requested here. Of course, feel free to fork and create them yourself, otherwise I’ll push them in the next few days.

    0
  11. 11

    sorry but i see a download IE 5 button in there. seeing as we are on IE 9 now…..

    0
  12. 12

    thank you. You’re the best in the whole internet!!! :)

    0
  13. 13

    Excellent concept.Nice icon design.Really great work.Thank you.

    0
  14. 14

    Use http://ShareSidebar.com if you want to easily add social buttons on your site

    0
  15. 15

    These are beautiful!

    But it’s not only IE6 and 7 that the aesthetics are inferior to the image based alternative, but in IE8 and 9 as well imho :-/

    0
  16. 16

    Thank you so much. Let’s just leave IE behind :)

    0
  17. 17

    Love these! My vote would be for some more multi-purpose kids!

    0
  18. 18

    Artur Salagean

    May 16, 2012 5:05 pm

    Very nice button sets. I am definitely going to use some of them in my future projects ;)

    0
  19. 19

    Webdesign Survivalist

    May 16, 2012 7:54 pm

    Stunning set. Thank you.

    0
  20. 20

    I have often wondered, doesn’t it violate trademark laws to modify most, if not all of these companies’ logos and graphics? If I remember correctly, Facebook, Pinterest and most others specifically prohibit modification of their logos and trademarked graphics in their terms of use.

    0

↑ Back to top