Free CSS Buttons SetFree Zocial Button Set: Social CSS3 Buttons

Advertisement

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

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

Features

  • 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

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

9

10

11

12

13

14

15

16

17

Usage

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, Lea18!]

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

(al)

↑ Back to topShare on Twitter

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

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

    0
  7. 7

    Some are great!
    Thanks for sharing, and inspiring.

    0
  8. 8

    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

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

    Any reason why the icon images would be replaced by 4 digits? Im using:

    Help would be appreciated

    0
  22. 22

    nice work. but unfurtunately i’m not going to use it for any project, while i’m only using 4-6 share icons at most. And therefor i will not serve an additional 30kb font-file + CSS to the user, as it’s slowing down loading (even remember mobile users). building your own icon sprite image with all needed icons is mostly smaller.
    maybe a webservice to create your own font file with selected icon would be a godd approach to keep performance in mind.
    but nevertheless i really like that work.

    cheers.

    0
  23. 23

    Hahaha, loved your “The Kids That Kinda Smell but Some People Don’t Mind” icons :-D, especially the Yahoo and IE ones…

    Thanks for the icon set.

    Andrés.

    0
  24. 24

    Would love a Steam icon, as well as a Formspring one.

    0
  25. 25

    you can now have it as a wordpress plugin

    download now from here

    http://wordpress.org/extend/plugins/zocial-buttonz-iconz/

    0
  26. 26

    Elliott Richmond

    June 7, 2012 1:49 am

    Wow! Have you checked out the source of the css!!

    0
  27. 27

    May I chip in with my WordPress plugin version for these buttons please :)

    You can get it @ http://wordpress.org/extend/plugins/wp-zocial-pro/ and it comes with a shortcode generator so you don’t have to remember all those html tags.

    All credit goes to the original author – thanks Sam for a great collection you put together.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top