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.
- Download the package4 (ZIP, 147 KB)
- GitHub repository5 (handwritten CSS)
- Sass framework6 (six buttons) (by @adamstac7)
- 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
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>
To choose buttons from the set, include the appropriate class name for the service, such as
Icon versions can be displayed by including an extra
.icon class, as follows:
<a class="zocial quora icon">Follow me on Quora</a>
- 1 http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes
- 2 https://www.smashingmagazine.com/wp-content/uploads/2012/02/Zocial-CSS3-Buttons-full-screenshot.png
- 3 http://zocial.smcllns.com/sample.html
- 4 http://zocial.smcllns.com/Zocial-CSS-Buttons.zip
- 5 http://github.com/samcollins/css-social-buttons
- 6 https://github.com/adamstac/zocial
- 7 https://twitter.com/adamstac
- 8 http://zocial.smcllns.com/sample.html
- 9 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-11.png
- 10 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-21.png
- 11 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-31.png
- 12 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-41.png
- 13 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-51.png
- 14 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-61.png
- 15 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-71.png
- 16 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-81.png
- 17 https://www.smashingmagazine.com/wp-content/uploads/2012/02/zocial-screenshot-set-91.png
- 18 http://twitter.com/LeaVerou
- 19 http://zocial.smcllns.com
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 Oxford, on March 15—16, with smart design patterns and front-end techniques.