Designing a CSS3 Button Set (Zocial)

After my first set of CSS buttons were adopted by WordPress for their official comments module, I decided to return to finish my project. This marks the end of my quest in making buttons with CSS and I must say I’m delighted with the result. I hope you’ll enjoy Zocial, my new update (demo site):

sample of buttons

Design requirements

I knew when I started this project that I had several requirements to meet:

  • A consistent aesthetic for an extensive set of buttons, supporting most popular modern web services
  • Scalable design (100% vector)
  • Clean, semantic markup that provided enough flexibility to achieve a high quality finish
  • Cross-browser compatability and graceful degration
  • No-hassle licensing

1. A complete set of buttons

One of my pet peeves is inconsistent button styles or states. I regularly come across an application which provides sign-in options for Facebook and Twitter etc. Most of the time, these buttons are completely different styles and have different hover and active states. It’s a distraction and the quality of the website takes a hit in my mind. Given the importance of these user actions, I believe these buttons should be consistent, polished, and considerate toward the the rest of your design.

With this button set, I tried to incorporate the most popular social buttons that might be needed by designers. These will of course change over time and there’s lots of room for additions. With this set, I outlined 42 buttons that I thought would be required 99% of the time.

Update: the button set is now 90-something buttons

2. Scalable design

Buttons are a part of my designs and more often than not, I have a specific size button I need to use. It was important, right from the start, that the size of these buttons could be easily adjusted. Scalability means that if I make the buttons larger, the buttons should keep their form and stay in resolution. Ultimately, I chose to design the buttons with ’ems’ as the base unit so changing the font-size would adjust the overall size of the button. See this working here.

3. 100% Vector

My initial version of these buttons used pngs for the icons. This broke the scalability of the buttons—at larger sizes the icons would pixelate. Anyone who has designed for multiple devices knows the painful exercise of generating all of their production images at several resolutions. Inspired by Pictos font, which I regularly use, I decided to create a typeface of the required social icons and font-face them in using pseudo-elements. The @font-face rule isn’t supported by IE6 and in this case, the buttons degrade appropriately.

4. Semantic, minimal markup

I started the design process with the markup, and kept it minimal. During the visual design of the buttons, as a rule I refused to add any extra markup to accomplish a specific design. If a design style wasn’t possible with the rudimentary markup, it was shelved as an adequate design. Most of you will understand the semantics to look at the code, but to discuss it briefly:

– The markup looks like: <button class="zocial [service]">Button Text</button>

– The parent element doesn’t need to be the button element but can be anything (a, div, span, etc.)

– The child span element is required in Firefox to adjust the line-height of buttons and ensures better cross-browser stability with these newer HTML5 elements.

– A class name (facebook, twitter, dropbox etc.) sets the button type, instead of [service] in the example above.

– Social icons are inserted using pseudo-elements (::before) and do not contaminate the markup.

5. Cross-browser compatibility

Since the markup was constructed properly, these buttons will work in modern browser. The real challenge was ensuring they looked great in any modern browser, exceptional in those supporting newer CSS3 declarations (like box-shadow: inset) and degraded gracefully through IE7 & IE6. It took a few iterations of the aesthetic design to construct a version that would achieve this.

6. No-hassle licencing

My initial few social buttons were released free and open source on github under an attribution-only licence. I thought for my efforts, I’d at least get some link backs. I’m pretty sure nobody did the attribution—bear in mind, that these buttons are now used in the official WordPress comments module. I know it’s to be expected, but I definitely wondered about the returned value for releasing them. This time, I’m releasing this full button set with no attribution requirements, buy them and use them wherever you wish.

These are now on Github (MIT License).

The End Result

I must say I am ecstatic about how they turned out. I went through about five revisions before being ready to release them (and indeed, use them for my company). They’re finally ready, I hope you’ll appreciate them: zocial.smcllns.com.