For the obsessive compulsive,
precocious designers of the web.
Utilitarian minds amongst you will wonder if such elegant buttons may improve conversions amongst your users. I conservatively assume that these finely crafted treasures will do no such thing—but rather, that they will remove the fickle distractions of inconsistent buttons and clear the way for your creative hands.
Pessimists will argue that the time has not yet arrived to embrace vector methods where image sprites once reigned superior. Perhaps it will be of some comfort to know that the first version of these buttons are used by WordPress and can be found in over 200,000 new blog posts every morning.
Entrepreneurs will indulge in the principle that all good work will be rewarded and before finishing this sentence, will have already calculated the cost-benefit of purchasing these items. For those more cash-strapped, you will find the first version of these buttons deep inside the crypts of github.
Editable button text
Editable size
One version for all resolutions
100% vector icon with @font-face
Cross-browser support
Gracefully degrades (IE6, IE7)
Button & Icon styles
These buttons require no extra markup and are designed with semantics in mind. Show examples.
On the parent element, add a class of "zocial" and a class for the button you need, in this case "facebook". Be sure to wrap your button text in a span tag as shown:
<button class="zocial facebook">Sign in with Facebook</button>
The parent element can be any element, this time we're using <a> to create a LinkedIn button:
<a class="zocial linkedin">Sign in with LinkedIn</a>
Change the size of the button by adjusting the font-size of the parent element. The default font-size is 16px.
<button class="zocial skype" style="font-size: 22px">Skype Me</button>
Simply add a class of "icon".
<a class="zocial twitter icon">Follow me on Twitter</a>