Free CSS Buttons SetFree 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-up 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.
- Preview
- Demo
- Download the package (ZIP, 147 KB)
- GitHub repository (handwritten CSS)
- Sass framework (six buttons) (by @adamstac)
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 demo.
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 . [Thanks, Lea!]<span> element
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 page.
(al)
Jenni
May 15th, 2012 4:46 amDo my eyes deceive me, or is there really no Flickr button included in this set???
Romain
May 15th, 2012 5:01 amCool concept, that’s easy to use. But I really don’t get it how the icons quality can be so bad.
Patrick Samphire
May 15th, 2012 5:48 amVery 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.
James
May 15th, 2012 8:28 amInteresting.
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. ; ]
luci
May 15th, 2012 9:26 amNice 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.
Roman Nurik
May 15th, 2012 10:10 amMay want to update the “Android Market” button and icon to “Google Play” — http://www.android.com/developers/branding.html
Carlo Rizzante
May 15th, 2012 11:23 amSome are great!
Thanks for sharing, and inspiring.
Gerd Wippich
May 15th, 2012 12:28 pmThanks 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
David Zuch
May 15th, 2012 2:48 pmNo Reddit or Digg buttons? I see those two in the “social toolbar” of more web sites and articles than so many of these.
Sam Collins
May 15th, 2012 4:15 pmThanks 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.
Zhai
May 15th, 2012 5:36 pmsorry but i see a download IE 5 button in there. seeing as we are on IE 9 now…..
Pablo
May 15th, 2012 7:07 pmthank you. You’re the best in the whole internet!!! :)
adumpaul
May 16th, 2012 12:48 amExcellent concept.Nice icon design.Really great work.Thank you.
Toni
May 16th, 2012 6:42 amUse http://ShareSidebar.com if you want to easily add social buttons on your site
Ove
May 16th, 2012 7:36 amThese 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 :-/
Van Luu
May 16th, 2012 4:15 pmThank you so much. Let’s just leave IE behind :)
Angus
May 16th, 2012 5:01 pmLove these! My vote would be for some more multi-purpose kids!
Artur Salagean
May 16th, 2012 5:05 pmVery nice button sets. I am definitely going to use some of them in my future projects ;)
Webdesign Survivalist
May 16th, 2012 7:54 pmStunning set. Thank you.
Kris S.
May 18th, 2012 3:06 pmI 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.
Colo
May 18th, 2012 11:05 pmAny reason why the icon images would be replaced by 4 digits? Im using:
Help would be appreciated
ikkez
May 19th, 2012 3:58 amnice 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.
Andres Jaimes
May 22nd, 2012 8:12 amHahaha, 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.
MaxOfS2D
June 3rd, 2012 1:33 pmWould love a Steam icon, as well as a Formspring one.
Ahmed AG
June 5th, 2012 12:39 amyou can now have it as a wordpress plugin
download now from here
http://wordpress.org/extend/plugins/zocial-buttonz-iconz/
Elliott Richmond
June 7th, 2012 1:49 amWow! Have you checked out the source of the css!!
Zulfikar Nore
March 23rd, 2013 5:27 amMay 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.