Edit in JSFiddle

<a class="zocial facebook"><span>Sign in with Facebook</span></a>
<a class="zocial googleplus"><span>Sign in with Google+</span></a>
<a class="zocial twitter"><span>Sign in with Twitter</span></a>
<a class="zocial linkedin"><span>Sign in with LinkedIn</span></a>

<a class="zocial dropbox"><span>Sync with Dropbox</span></a>
<a class="zocial evernote"><span>Clip to Evernote</span></a>
<a class="zocial forrst"><span>Follow me on Forrst</span></a>
<a class="zocial dribbble"><span>Sign in with Dribbble</span></a>
<a class="zocial cloudapp"><span>Sign in to CloudApp</span></a>
<a class="zocial github"><span>Fork me on Github</span></a>
<a class="zocial spotify"><span>Play on Spotify</span></a>
<a class="zocial instapaper"><span>Read It Later</span></a>
<a class="zocial soundcloud"><span>Follow me on Soundcloud</span></a>
<a class="zocial tumblr"><span>Follow me on Tumblr</span></a>
<a class="zocial smashing"><span>Read on Smashing Magazine</span></a>
<a class="zocial itunes"><span>Available on iTunes</span></a>
<a class="zocial appstore"><span>Available on the App Store</span></a>
<a class="zocial macstore"><span>Available on the Mac App Store</span></a>
<a class="zocial android"><span>Available on Android Market</span></a>

<a class="zocial paypal"><span>Pay with Paypal</span></a>
<a class="zocial amazon"><span>Sign in with Amazon</span></a>
<a class="zocial skype"><span>Call me on Skype</span></a>
<a class="zocial lastfm"><span>Sign in with Last.fm</span></a>
<a class="zocial yelp"><span>Write a review on Yelp</span></a>
<a class="zocial foursquare"><span>Check in with foursquare</span></a>

<a class="zocial wikipedia"><span>View on Wikipedia</span></a>
<a class="zocial disqus"><span>Sign in with Disqus</span></a>
<a class="zocial intensedebate"><span>Sign in with IntenseDebate</span></a>
<a class="zocial google"><span>Sign in with Google</span></a>
<a class="zocial gmail"><span>Sign in with Gmail</span></a>
<a class="zocial vimeo"><span>Upload to Vimeo</span></a>
<a class="zocial scribd"><span>Read more on Scribd</span></a>
<a class="zocial youtube"><span>Subscribe on YouTube</span></a>
<a class="zocial wordpress"><span>Sign in with WordPress</span></a>
<a class="zocial songkick"><span>Sign in with Songkick</span></a>
<a class="zocial posterous"><span>Sign in with Posterous</span></a>
<a class="zocial eventbrite"><span>Sign in with Eventbrite</span></a>
<a class="zocial flattr"><span>Tip with Flattr</span></a>
<a class="zocial plancast"><span>Follow me on Plancast</span></a>



<a class="zocial yahoo"><span>Submit resume for CEO</span></a>
<a class="zocial ie"><span>Download Internet Explorer 5</span></a>
<a class="zocial meetup"><span>Report bugs with Meetup.com</span></a>
<a class="zocial openid"><span>Learn how-to-use OpenID</span></a>
<a class="zocial html5"><span>Register now for HTML6</span></a>

<a class="zocial guest"><span>Sign in as guest</span></a>
<a class="zocial creativecommons"><span>View Creative Commons Licence</span></a>
<a class="zocial rss"><span>Subscribe to RSS</span></a>
<a class="zocial chrome"><span>Add to Chrome</span></a>

<a class="zocial eventasaurus"><span>Sign up for Eventasaurus</span></a>

<a class="zocial weibo"><span>Join me on Weibo</span></a>
<a class="zocial plurk"><span>Sign in with Plurk</span></a>
<a class="zocial grooveshark"><span>Play on Grooveshark</span></a>
<a class="zocial blogger"><span>Post on Blogger</span></a>
<a class="zocial viadeo"><span>Sign in with Viadeo</span></a>
<a class="zocial pinterest"><span>Follow me on Pinterest</span></a>
<a class="zocial podcast"><span>Subscribe to this Podcast</span></a>
<a class="zocial fivehundredpx"><span>View Portfolio on 500px</span></a>
<a class="zocial bitcoin"><span>Bitcoin accepted here</span></a>
<a class="zocial ninetyninedesigns"><span>View Portfolio on 99Designs</span></a>
<a class="zocial quora"><span>Follow me on Quora</span></a>
<a class="zocial pinboard"><span>Bookmark with Pinboard</span></a>
<a class="zocial stumbleupon"><span>Stumble!</span></a>
<a class="zocial myspace"><span>Find me on Myspace</span></a>

<a class="zocial call"><span>Call a phone</span></a>
<a class="zocial email"><span>Send a message</span></a>
<br />
<a class="zocial primary" title="A primary button for general purposes to keep consistency with Zocial"><span>Primary action</span></a>
<a class="zocial secondary" title="A secondary button for general purposes to keep consistency with Zocial"><span>Secondary action</span></a>

<a class="zocial icon facebook"><span>Sign in with Facebook</span></a>
<a class="zocial icon googleplus"><span>Sign in with Google+</span></a>
<a class="zocial icon twitter"><span>Sign in with Twitter</span></a>
<a class="zocial icon google"><span>Sign in with Google</span></a>
<a class="zocial icon linkedin"><span>Sign in with LinkedIn</span></a>
<a class="zocial icon paypal"><span>Pay with Paypal</span></a>
<a class="zocial icon amazon"><span>Sign in with Amazon</span></a>
<a class="zocial icon dropbox"><span>Sync with Dropbox</span></a>
<a class="zocial icon evernote"><span>Clip to Evernote</span></a>
<a class="zocial icon skype"><span>Call me on Skype</span></a>
<a class="zocial icon guest"><span>Sign in as guest</span></a>
<a class="zocial icon spotify"><span>Play on Spotify</span></a>
<a class="zocial icon lastfm"><span>Sign in with Last.fm</span></a>
<a class="zocial icon songkick"><span>Sign in with Songkick</span></a>
<a class="zocial icon forrst"><span>Follow me on Forrst</span></a>
<a class="zocial icon dribbble"><span>Sign in with Dribbble</span></a>
<a class="zocial icon cloudapp"><span>Sign in to CloudApp</span></a>
<a class="zocial icon github"><span>Fork me on Github</span></a>
<a class="zocial icon itunes"><span>Download on iTunes</span></a>
<a class="zocial icon android"><span>Download on Android</span></a>
<a class="zocial icon disqus"><span>Sign in with Disqus</span></a>
<a class="zocial icon yahoo"><span>Sign in with Yahoo</span></a>
<a class="zocial icon vimeo"><span>Upload to Vimeo</span></a>
<a class="zocial icon chrome"><span>Add to Chrome</span></a>
<a class="zocial icon ie"><span>Get a new browser</span></a>
<a class="zocial icon html5"><span>Made from HTML5</span></a>
<a class="zocial icon instapaper"><span>Read It Later</span></a>
<a class="zocial icon scribd"><span>Read more on Scribd</span></a>
<a class="zocial icon wikipedia"><span>View on Wikipedia</span></a>
<a class="zocial icon flattr"><span>Tip with Flattr</span></a>
<a class="zocial icon tumblr"><span>Follow me on Tumblr</span></a>
<a class="zocial icon posterous"><span>Subscribe to my Posterous</span></a>
<a class="zocial icon gowalla"><span>Check in with Gowalla</span></a>
<a class="zocial icon foursquare"><span>Check in with foursquare</span></a>
<a class="zocial icon yelp"><span>Write a review on Yelp</span></a>
<a class="zocial icon soundcloud"><span>Follow me on Soundcloud</span></a>
<a class="zocial icon smashing"><span>Read on Smashing Magazine</span></a>
<a class="zocial icon wordpress"><span>Sign in with WordPress</span></a>
<a class="zocial icon intensedebate"><span>Sign in with IntenseDebate</span></a>
<a class="zocial icon openid"><span>Sign in with OpenID</span></a>
<a class="zocial icon gmail"><span>Sign in with Gmail</span></a>
<a class="zocial icon eventbrite"><span>Sign in with Eventbrite</span></a>
<a class="zocial icon eventasaurus"><span>Sign in with Eventasaurus</span></a>
<a class="zocial icon meetup"><span>Sign in with Meetup.com</span></a>
<a class="zocial icon plancast"><span>Follow me on Plancast</span></a>
<a class="zocial icon youtube"><span>Subscribe on YouTube</span></a>
<a class="zocial icon appstore"><span>Available on the Mac App Store</span></a>
<a class="zocial icon creativecommons"><span>View Creative Commons Licence</span></a>
<a class="zocial icon rss"><span>Subscribe to RSS</span></a>
<a class="zocial weibo icon"><span>Follow me on Weibo</span></a>
<a class="zocial plurk icon"><span>Follow me on Plurk</span></a>
<a class="zocial grooveshark icon"><span>Follow me on Grooveshark</span></a>
<a class="zocial blogger icon"><span>Post on Blogger</span></a>
<a class="zocial viadeo icon"><span>Sign in with Viadeo</span></a>
<a class="zocial pinterest icon"><span>Follow me on Pinterest</span></a>
<a class="zocial podcast icon"><span>Subscribe to this Podcast</span></a>
<a class="zocial fivehundredpx icon"><span>View Portfolio on 500px</span></a>
<a class="zocial bitcoin icon"><span>Bitcoin accepted here</span></a>
<a class="zocial ninetyninedesigns icon"><span>View Portfolio on 99Designs</span></a>
<a class="zocial quora icon"><span>Follow me on Quora</span></a>
<a class="zocial pinboard icon"><span>Bookmark with Pinboard</span></a>
<a class="zocial stumbleupon icon"><span>Stumble!</span></a>
<a class="zocial call icon"><span>Call a phone</span></a>
<a class="zocial email icon"><span>Send a message</span></a>
<a class="zocial itunes icon"><span>Download on iTunes</span></a>
<a class="zocial myspace icon"><span>Find me on Myspace</span></a>
html {
    background: #f0f0eb;
    font-family: "Helvetica Neue", sans-serif;
}
h2, p {
    font-family: "Pompiere","Helvetica Neue", sans-serif;
}
body {
    background: #FFF;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
    margin: 0 auto 2em;
    padding: 2em 1em;
    width: 600px;
}
body .zocial {
    margin: 8px 4px;
    font-size: 16px;
}
h2 {
    font-size: 17px;
    font-weight: normal;
    padding: 1em 0 0.75em;
    border-bottom: 1px solid #eee;
}

/* Code written by Sam Collins (@smcllns) of www.eventasaur.us */
/* You are free to use this work commercially */
/* You are free to extend this work without permissions from the author (just do so tastefully eh?) */
/* Enjoy */

/*Vector Icons*/
@font-face {
    font-family: 'zocial';
    src: url('zocial-regular-webfont.eot');
    src: url('zocial-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('zocial-regular-webfont.woff') format('woff'),
    url('zocial-regular-webfont.ttf') format('truetype'),
    url('zocial-regular-webfont.svg#ZocialRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Button Structure*/
.zocial {
    border: 1px solid rgba(0,0,0,0.2);
    border-bottom-color: rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.4), inset 0 0 0.0625em rgba(255,255,255,0.6);
    -webkit-box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.4), inset 0 0 0.0625em rgba(255,255,255,0.6);
    box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.4), inset 0 0 0.0625em rgba(255,255,255,0.6);
    color: #fff;
    cursor: pointer;
    font-family: "Lucida Grande", Tahoma, sans-serif;
    font-size: 1em;
    line-height: 1.6em;
    letter-spacing: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.zocial > span:before {
    border-right: 0.075em solid rgba(0,0,0,0.1);
    -moz-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
    -webkit-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
    box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
    content: "";
    display: block;
    float: left;
    font-family: "zocial" !important;
    font-size: 1.25em;
    min-height: 1em;
    font-style: normal !important;
    font-weight: normal !important;
    margin: 0.1em 0.5em 0 0;
    text-align: center !important;
    padding: 0 0.5em;
    text-transform: none !important;
    text-decoration: none !important;
}
.zocial > span {
    display: block;
    font-size: 80%;
    font-weight: bold;
    padding: 0em 1em 0 0;
    white-space: nowrap;
    position: relative;
    z-index: 100;
}

.zocial,
.zocial > span {
    -moz-border-radius: 0.2em;
    -o-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    position: relative;
    z-index: 100;
}

.zocial:active {
    outline: none; /* outline is visible on :focus */
}


/*Gradients*/
.zocial > span {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), color-stop(49%, rgba(255,255,255,0.05)), color-stop(51%, rgba(0,0,0,0.05)), to(rgba(0,0,0,0.1)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.05) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.1));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.05) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.1));
    background: linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.05) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.1));
}

.zocial:hover > span, .zocial:focus > span {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.15)), color-stop(49%, rgba(255,255,255,0.15)), color-stop(51%, rgba(0,0,0,0.1)), to(rgba(0,0,0,0.15)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 49%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.15));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 49%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.15));
    background: linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 49%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.15));
}

.zocial:active > span {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
    background: linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
}

/*Adjustments for light background buttons*/
.zocial.plancast, .zocial.posterous, .zocial.dropbox, .zocial.openid, .zocial.instapaper,
.zocial.github, .zocial.wikipedia, .zocial.cloudapp, .zocial.gmail, .zocial.weibo, .zocial.viadeo, .zocial.bitcoin, .zocial.ninetyninedesigns, .zocial.email, .zocial.secondary, .zocial.itunes {
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    -moz-box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.8), inset 0 0 0.0625em rgba(255,255,255,0.5);
    -webkit-box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.8), inset 0 0 0.0625em rgba(255,255,255,0.5);
    box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.8), inset 0 0 0.0625em rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-color: rgba(0,0,0,0.5);
}

/*:hover adjustments for light background buttons*/
.zocial.plancast:hover > span, .zocial.posterous:hover > span, .zocial.dropbox:hover > span, .zocial.openid:hover > span, .zocial.instapaper:hover > span, .zocial.github:hover > span, .zocial.wikipedia:hover > span, .zocial.gmail:hover > span, .zocial.plancast:focus > span, .zocial.twitter:focus > span, .zocial.posterous:focus > span, .zocial.dropbox:focus > span, .zocial.openid:focus > span, .zocial.instapaper:focus > span, .zocial.github:focus > span, .zocial.wikipedia:focus > span, .zocial.gmail:focus > span, .zocial.weibo:focus > span, .zocial.weibo:hover > span, .zocial.viadeo:hover > span, .zocial.viadeo:focus > span, .zocial.bitcoin:hover > span, .zocial.bitcoin:focus > span, .zocial.ninetyninedesigns:hover > span, .zocial.ninetyninedesigns:focus > span, .zocial.email:hover > span, .zocial.email:focus > span, .zocial.secondary:focus > span, .zocial.secondary:hover > span, .zocial.itunes:focus > span, .zocial.itunes:hover > span {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), color-stop(49%, rgba(255,255,255,0.2)), color-stop(51%, rgba(0,0,0,0.05)), to(rgba(0,0,0,0.15)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));
    background: linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));
}

/*:active adjustments for light background buttons*/
.zocial.plancast:active > span, .zocial.posterous:active > span, .zocial.dropbox:active > span, .zocial.openid:active > span, .zocial.instapaper:active > span, .zocial.github:active > span, .zocial.wikipedia:active > span, .zocial.gmail:active > span, .zocial.weibo:active > span, .zocial.viadeo:active > span, .zocial.bitcoin:active > span, .zocial.ninetyninedesigns:active > span, .zocial.email:active > span, .zocial.secondary:active > span, .zocial.itunes:active > span {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
    background: linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
}

/*Button icon*/
.zocial.facebook > span:before {content: "f";}
.zocial.twitter > span:before {content: "T";}
.zocial.google > span:before {content: "G";}
.zocial.linkedin > span:before {content: "L";}
.zocial.meetup > span:before {content: "M";}
.zocial.plancast > span:before {content: "P";}
.zocial.soundcloud > span:before {content: "s";}
.zocial.tumblr > span:before {content: "t";}
.zocial.dribbble > span:before {content: "D";}
.zocial.forrst > span:before {content: ":"; color: #50894F;}
.zocial.dropbox > span:before {content: "d"; color: #1F75CC;}
.zocial.posterous > span:before {content: "~";}
.zocial.flattr > span:before {content: "%";}
.zocial.spotify > span:before {content: "=";}
.zocial.foursquare > span:before {content: "4";}
.zocial.intensedebate > span:before {content: "{";}
.zocial.wordpress > span:before {content: "w";}
.zocial.smashing > span:before {content: "*";}
.zocial.yahoo > span:before {content: "Y";}
.zocial.openid > span:before {content: "o"; color: #FF921D;}
.zocial.guest > span:before {content: "?";}
.zocial.instapaper > span:before {content: "I";}
.zocial.android > span:before {content: "&";}
.zocial.appstore > span:before {content: "A";}
.zocial.paypal > span:before {content: "$";}
.zocial.macstore > span:before {content: "^";}
.zocial.creativecommons > span:before {content: "C";}
.zocial.disqus > span:before {content: "Q";}
.zocial.github > span:before {content: "g";}
.zocial.eventasaurus > span:before {content: "v";}
.zocial.eventbrite > span:before {content: "|";}
.zocial.chrome > span:before {content: "[";}
.zocial.html5 > span:before {content: "5";}
.zocial.songkick > span:before {content: "k";}
.zocial.vimeo > span:before {content: "V";}
.zocial.youtube > span:before {content: "U";}
.zocial.gowalla > span:before {content: "@";}
.zocial.skype > span:before {content: "S";}
.zocial.aol > span:before {content: "\"";}
.zocial.wikipedia > span:before {content: ",";}
.zocial.rss > span:before {content: "R";}
.zocial.yelp > span:before {content: "y";}
.zocial.evernote > span:before {content: "E";}
.zocial.ie > span:before {content: "6";}
.zocial.cloudapp > span:before {content: "c";}
.zocial.gmail > span:before {content: "m"; color: #ff0000;}
.zocial.amazon > span:before {content: "a";}
.zocial.lastfm > span:before {content: "l";}
.zocial.googleplus > span:before {content: "+";}
.zocial.grooveshark > span:before {content: "K";}
.zocial.plurk > span:before {content: "j";}
.zocial.weibo > span:before {content: "J"; color: #E6162D;}
.zocial.blogger > span:before {content: "B";}
.zocial.viadeo > span:before {content: "H"; color: #F59B20;}
.zocial.pinterest > span:before {content: "1";}
.zocial.podcast > span:before {content: "`";}
.zocial.bitcoin > span:before {content: "2"; color: #F7931A;}
.zocial.fivehundredpx > span:before {content: "0"; color: #29B6FF;}
.zocial.ninetyninedesigns > span:before {content: "9"; color: #F50;}
.zocial.quora > span:before {content: "q";}
.zocial.pinboard > span:before {content: "n";}
.zocial.stumbleupon > span:before {content: "/";}
.zocial.email > span:before {content: "]"; color: #312C2A;}
.zocial.call > span:before {content: "7";}
.zocial.itunes > span:before {content: "i"; color: #1A6DD2;}
.zocial.myspace > span:before {content: "_";}

/*Main button area*/
.zocial.openid {background: #f5f5f5; color: #333;}
.zocial.guest {background: #1B4D6D;}
.zocial.instapaper {color: #222; background: #eee;}
.zocial.android {background: #A4C639;}
.zocial.appstore {background: #000;}
.zocial.paypal { background: #FF921D; color: #032751; text-shadow: 0 1px 0 rgba(255,255,255,0.5);}
.zocial.macstore {background: #007DCB}
.zocial.creativecommons {background: #000;}
.zocial.disqus {background: #5D8AAD;}
.zocial.github {color: #050505; background: #FBFBFB;}
.zocial.gowalla {background: #FF720A;}
.zocial.skype {background: #00A2ED;}
.zocial.aol {background: #FF0000;}
.zocial.wikipedia {background: #fff; color: #000;}
.zocial.rss {background: #FF7F25;}
.zocial.yelp {background: #E60010;}
.zocial.scribd > span:before {content: "}"; color: #00D5EA;}
.zocial.scribd {background: #231C1A;}
.zocial.eventasaurus {background: #8CCC33;}
.zocial.eventbrite {background: #FF5616;}
.zocial.chrome {background: #006CD4;}
.zocial.html5 {background: #FF3617;}
.zocial.songkick {background: #FF0050;}
.zocial.vimeo {background: #00A2CD;}
.zocial.youtube {background: #FF0000;}
.zocial.yahoo {background: #A200C2;}
.zocial.intensedebate {background: #0099E1;}
.zocial.smashing {background: #FF4F27;}
.zocial.wordpress {background: #464646;}
.zocial.facebook {background: #4863AE;}
.zocial.linkedin {background: #0083A8;}
.zocial.twitter {background: #46C0FB;}
.zocial.google {background: #4E6CF7;}
.zocial.meetup {background: #FF0026;}
.zocial.plancast {background: #E7EBED; color: #333;}
.zocial.soundcloud {background: #FF4500;}
.zocial.tumblr {background: #374a61;}
.zocial.foursquare {background: #44A8E0;}
.zocial.dribbble {background: #ea4c89;}
.zocial.forrst {background: #1E360D;}
.zocial.dropbox {background: #FFF; color: #312c2a;}
.zocial.posterous {background: #FFD959; color: #BC7134;}
.zocial.flattr {background: #8ABA42;}
.zocial.spotify {background: #60AF00;}
.zocial.evernote {background: #6BB130; color: #fff;}
.zocial.ie {background: #00A1D9;}
.zocial.cloudapp {background: #fff; color: #312c2a;}
.zocial.gmail {background: #efefef; color: #222;}
.zocial.amazon {background: #FFAD1D; color: #030037; text-shadow: 0 1px 0 rgba(255,255,255,0.5);}
.zocial.lastfm {background: #dc1a23;}
.zocial.googleplus {background: #DD4B39;}
.zocial.plurk {background: #CF682F;}
.zocial.weibo {background: #FAF6F1; color: #000;}
.zocial.grooveshark {background: #111; color:#EEE;}
.zocial.blogger {background: #EE5A22;}
.zocial.viadeo {background: #FFF;  color: #000;}
.zocial.pinterest {background: #C91618;}
.zocial.podcast {background: #9365CE;}
.zocial.bitcoin {background: #EFEFEF; color: #4D4D4D;}
.zocial.fivehundredpx {background: #333;}
.zocial.ninetyninedesigns {background: #FFF; color: #072243;}
.zocial.quora {background: #A82400;}
.zocial.pinboard {background: blue;}
.zocial.stumbleupon {background: #EB4924;}
.zocial.email {background: #F0F0EB; color: #312C2A;}
.zocial.call {background: green;}
.zocial.itunes {background: #EFEFEB; color: #312C2A}
.zocial.myspace {background: #000;}

/*The Misc Buttons*/
/*These button have no icons and can be general purpose buttons while ensuring consistent button style*/
/*Credit to @guillermovs*/
.zocial.primary > span, .zocial.secondary > span {margin: 0.1em 0; padding: 0 1em;}

.zocial.primary > span:before, .zocial.secondary > span:before {display: none;}

.zocial.primary {background: #333;} /*Change background-color here*/
.zocial.secondary {background: #F0F0EB; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,0.8) } /*Change background-color here*/




/*Browser Specific Adjustments*/
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*These buttons can be displayed as standalone icons if you also add a class of "icon"*/
.zocial.icon {
    width: 1.85em;
    overflow: hidden;
}
.zocial.icon > span:before {
    width: 1.85em;
    padding: 0;
}