Good buttons
make good neighbours.

Hundred CSS buttons and icons lovingly made for your home.
Get 'em on Github

Looking for the SASS framework? Get it here!


100 CSS3 font-face
vector icon buttons

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.

Font size: 16px

Button text



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.

Create a Facebook button

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>

Create a LinkedIn 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>

Resize the button

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>

Show the icon version of the button

Simply add a class of "icon".

<a class="zocial twitter icon">Follow me on Twitter</a>