Created
May 16, 2012 00:30
-
-
Save nijikokun/2706285 to your computer and use it in GitHub Desktop.
Better Zocial Button CSS, Anti-Aliasing, Smoother Shadows and Better Borders and Colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
/*! | |
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 | |
*/ | |
/* Reference icons from font-files */ | |
* { | |
-webkit-font-smoothing: antialiased; | |
} | |
@font-face { | |
font-family: 'zocial'; | |
font-style: normal; | |
font-weight: normal; | |
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'); | |
} | |
/* Button structure */ | |
.zocial, | |
a.zocial { | |
border: 1px solid rgba(0,0,0,0.15); | |
border-bottom-color: rgba(0,0,0,0.2); | |
border-top-color: rgba(0,0,0,0.1); | |
color: #fff; | |
-moz-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9); | |
-webkit-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9); | |
box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.14), inset 0 0 0.1em rgba(255,255,255,0.5); | |
cursor: pointer; | |
display: inline-block; | |
font: bold 100%/2.1 "Lucida Grande", Tahoma, sans-serif; | |
padding: 0 .95em 0 0; | |
text-align: center; | |
text-decoration: none; | |
text-shadow: 0 1px 0 rgba(0,0,0,0.2); | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
user-select: none; | |
position: relative; | |
z-index: 100; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
} | |
.zocial:before { | |
content: ""; | |
border-right: 0.075em solid rgba(0,0,0,0.05); | |
float: left; | |
font: 120%/1.65 zocial; | |
font-style: normal; | |
font-weight: normal; | |
margin: 0 0.5em 0 0; | |
padding: 0 0.5em; | |
text-align: center; | |
text-decoration: none; | |
text-transform: none; | |
-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); | |
} | |
.zocial:active { | |
outline: none; /* outline is visible on :focus */ | |
} | |
/* Buttons can be displayed as standalone icons by adding a class of "icon" */ | |
.zocial.icon { | |
overflow: hidden; | |
max-width: 2.4em; | |
padding-left: 0; | |
padding-right: 0; | |
max-height: 2.15em; | |
} | |
.zocial.icon:before { | |
padding: 0; | |
width: 2em; | |
height: 2em; | |
box-shadow: none; | |
border: none; | |
} | |
/* Gradients */ | |
.zocial { | |
background-image: -moz-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); | |
background-image: -ms-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); | |
background-image: -o-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), color-stop(49%, rgba(255,255,255,.05)), color-stop(51%, rgba(0,0,0,.05)), to(rgba(0,0,0,.1))); | |
background-image: -webkit-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.02) 51%, rgba(0,0,0,.1)); | |
background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1)); | |
} | |
.zocial:hover, .zocial:focus { | |
background-image: -moz-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); | |
background-image: -ms-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); | |
background-image: -o-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.12)), color-stop(49%, rgba(255,255,255,.15)), color-stop(51%, rgba(0,0,0,.04)), to(rgba(0,0,0,.04))); | |
background-image: -webkit-linear-gradient(rgba(255,255,255,.12) 49%, rgba(0,0,0,.04) 51%, rgba(0,0,0,.04)); | |
background-image: linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15)); | |
} | |
.zocial:active { | |
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); | |
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); | |
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, transparent), to(rgba(0,0,0,.1))); | |
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); | |
background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); | |
} | |
/* Adjustments for light background buttons */ | |
.zocial.bitcoin, | |
.zocial.cloudapp, | |
.zocial.dropbox, | |
.zocial.email, | |
.zocial.eventful, | |
.zocial.github, | |
.zocial.gmail, | |
.zocial.instapaper, | |
.zocial.itunes, | |
.zocial.ninetyninedesigns, | |
.zocial.openid, | |
.zocial.plancast, | |
.zocial.posterous, | |
.zocial.secondary, | |
.zocial.viadeo, | |
.zocial.weibo, | |
.zocial.wikipedia { | |
background-clip: padding-box; | |
-moz-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5); | |
-webkit-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5); | |
box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5); | |
text-shadow: 0 1px 0 rgba(255,255,255,0.2); | |
} | |
/* :hover adjustments for light background buttons */ | |
.zocial.bitcoin:focus, | |
.zocial.bitcoin:hover, | |
.zocial.dropbox:focus, | |
.zocial.dropbox:hover, | |
.zocial.email:focus, | |
.zocial.email:hover, | |
.zocial.eventful:focus, | |
.zocial.eventful:hover, | |
.zocial.github:focus, | |
.zocial.github:hover, | |
.zocial.gmail:focus, | |
.zocial.gmail:hover, | |
.zocial.instapaper:focus, | |
.zocial.instapaper:hover, | |
.zocial.itunes:focus, | |
.zocial.itunes:hover, | |
.zocial.ninetyninedesigns:focus, | |
.zocial.ninetyninedesigns:hover, | |
.zocial.openid:focus, | |
.zocial.openid:hover, | |
.zocial.plancast:focus, | |
.zocial.plancast:hover, | |
.zocial.posterous:focus, | |
.zocial.posterous:hover, | |
.zocial.secondary:focus, | |
.zocial.secondary:hover, | |
.zocial.twitter:focus, | |
.zocial.viadeo:focus, | |
.zocial.viadeo:hover, | |
.zocial.weibo:focus, | |
.zocial.weibo:hover, | |
.zocial.wikipedia:focus, | |
.zocial.wikipedia:hover { | |
background-image: -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-image: -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-image: -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-image: -o-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-image: -ms-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-image: 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.bitcoin:active, | |
.zocial.dropbox:active, | |
.zocial.email:active, | |
.zocial.eventful:active, | |
.zocial.github:active, | |
.zocial.gmail:active, | |
.zocial.instapaper:active, | |
.zocial.itunes:active, | |
.zocial.ninetyninedesigns:active, | |
.zocial.openid:active, | |
.zocial.plancast:active, | |
.zocial.posterous:active, | |
.zocial.secondary:active, | |
.zocial.viadeo:active, | |
.zocial.weibo:active, | |
.zocial.wikipedia:active { | |
background-image: -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-image: -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-image: -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-image: -o-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-image: -ms-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-image: 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 and color */ | |
/* Icon characters are stored in unicode private area */ | |
.zocial.amazon:before {content: "\E040";} | |
.zocial.android:before {content: "\E005";} | |
.zocial.aol:before {content: "\E001";} | |
.zocial.appstore:before {content: "\E020";} | |
.zocial.bitcoin:before {content: "\E011"; color: #f7931a;} | |
.zocial.blogger:before {content: "\E021";} | |
.zocial.call:before {content: "\E016";} | |
.zocial.cal:before {content: "\E00D";} | |
.zocial.chrome:before {content: "\E03A";} | |
.zocial.cloudapp:before {content: "\E042";} | |
.zocial.creativecommons:before {content: "\E022";} | |
.zocial.disqus:before {content: "\E030";} | |
.zocial.dribbble:before {content: "\E023";} | |
.zocial.dropbox:before {content: "\E043"; color: #1f75cc;} | |
.zocial.email:before {content: "\E03C"; color: #312c2a;} | |
.zocial.eventasaurus:before {content: "\E055"; color: #9de428;} | |
.zocial.eventbrite:before {content: "\E05B";} | |
.zocial.eventful:before {content: "\E006"; color: #0066CC;} | |
.zocial.evernote:before {content: "\E024";} | |
.zocial.facebook:before {content: "\E045";} | |
.zocial.fivehundredpx:before {content: "\E00F"; color: #29b6ff;} | |
.zocial.flattr:before {content: "\E004";} | |
.zocial.forrst:before {content: "\E019"; color: #50894f;} | |
.zocial.foursquare:before {content: "\E013";} | |
.zocial.github:before {content: "\E046";} | |
.zocial.gmail:before {content: "\E04C"; color: #f00;} | |
.zocial.google:before {content: "\E026";} | |
.zocial.googleplus:before {content: "\E00A";} | |
.zocial.gowalla:before {content: "\E01F";} | |
.zocial.grooveshark:before {content: "\E017";} | |
.zocial.guest:before {content: "\E01E";} | |
.zocial.html5:before {content: "\E014";} | |
.zocial.ie:before {content: "\E015";} | |
.zocial.instapaper:before {content: "\E028";} | |
.zocial.intensedebate:before {content: "\E05A";} | |
.zocial.itunes:before {content: "\E048"; color: #1a6dd2;} | |
.zocial.klout:before {content: "\E02A"; } | |
.zocial.lanyrd:before {content: "\E00C";} | |
.zocial.lastfm:before {content: "\E04B";} | |
.zocial.linkedin:before {content: "\E02B";} | |
.zocial.macstore:before {content: "\E03D";} | |
.zocial.meetup:before {content: "\E02C";} | |
.zocial.myspace:before {content: "\E03E";} | |
.zocial.ninetyninedesigns:before {content: "\E018"; color: #f50;} | |
.zocial.openid:before {content: "\E04E"; color: #ff921d;} | |
.zocial.paypal:before {content: "\E003";} | |
.zocial.pinboard:before {content: "\E04D";} | |
.zocial.pinterest:before {content: "\E010";} | |
.zocial.plancast:before {content: "\E02F";} | |
.zocial.plurk:before {content: "\E049";} | |
.zocial.podcast:before {content: "\E03F";} | |
.zocial.posterous:before {content: "\E05D";} | |
.zocial.quora:before {content: "\E050";} | |
.zocial.rss:before {content: "\E031";} | |
.zocial.scribd:before {content: "\E05C"; color: #00d5ea;} | |
.zocial.skype:before {content: "\E032";} | |
.zocial.smashing:before {content: "\E009";} | |
.zocial.songkick:before {content: "\E04A";} | |
.zocial.soundcloud:before {content: "\E052";} | |
.zocial.spotify:before {content: "\E01C";} | |
.zocial.stumbleupon:before {content: "\E00E";} | |
.zocial.tumblr:before {content: "\E053";} | |
.zocial.twitter:before {content: "\E033";} | |
.zocial.viadeo:before {content: "\E027"; color: #f59b20;} | |
.zocial.vimeo:before {content: "\E035";} | |
.zocial.weibo:before {content: "\E029"; color: #e6162d;} | |
.zocial.wikipedia:before {content: "\E00B";} | |
.zocial.windows:before {content: "\E036";} | |
.zocial.xing:before {content: "\E037"} | |
.zocial.wordpress:before {content: "\E056";} | |
.zocial.yahoo:before {content: "\E038";} | |
.zocial.yelp:before {content: "\E058";} | |
.zocial.youtube:before {content: "\E034";} | |
/* Button background and text color */ | |
.zocial.amazon {background-color: white; color: #ff9900; text-shadow: 0 1px 0 rgba(255,255,255,0.2);} | |
.zocial.android {background-color: #a4c639;} | |
.zocial.aol {background-color: #f00;} | |
.zocial.appstore {background-color: #000;} | |
.zocial.bitcoin {background-color: #efefef; color: #4d4d4d;} | |
.zocial.blogger {background-color: #ee5a22;} | |
.zocial.call {background-color: #008000;} | |
.zocial.cal {background-color: #d63538;} | |
.zocial.chrome {background-color: #006cd4;} | |
.zocial.cloudapp {background-color: #fff; color: #2c2c2c;} | |
.zocial.creativecommons {background-color: #000;} | |
.zocial.disqus {background-color: #5d8aad;} | |
.zocial.dribbble {background-color: #ea4c89;} | |
.zocial.dropbox {background-color: #fff; color: #312c2a;} | |
.zocial.email {background-color: #f0f0eb; color: #312c2a;} | |
.zocial.eventasaurus {background-color: #192931; color: #fff;} | |
.zocial.eventbrite {background-color: #ff5616;} | |
.zocial.eventful {background-color: #fff; color: #47ab15;} | |
.zocial.evernote {background-color: #6bb130; color: #fff;} | |
.zocial.facebook {background-color: #4863ae;} | |
.zocial.fivehundredpx {background-color: #333;} | |
.zocial.flattr {background-color: #8aba42;} | |
.zocial.forrst {background-color: #1e360d;} | |
.zocial.foursquare {background-color: #44a8e0;} | |
.zocial.github {background-color: #fbfbfb; color: #050505;} | |
.zocial.gmail {background-color: #efefef; color: #222;} | |
.zocial.google {background-color: #4e6cf7;} | |
.zocial.googleplus {background-color: #dd4b39;} | |
.zocial.gowalla {background-color: #ff720a;} | |
.zocial.grooveshark {background-color: #111; color:#eee;} | |
.zocial.guest {background-color: #1b4d6d;} | |
.zocial.html5 {background-color: #ff3617;} | |
.zocial.ie {background-color: #00a1d9;} | |
.zocial.instapaper {background-color: #eee; color: #222;} | |
.zocial.intensedebate {background-color: #0099e1;} | |
.zocial.klout {background-color: #e34a25;} | |
.zocial.itunes {background-color: #efefeb; color: #312c2a;} | |
.zocial.lanyrd {background-color: #2e6ac2;} | |
.zocial.lastfm {background-color: #dc1a23;} | |
.zocial.linkedin {background-color: #0083a8;} | |
.zocial.macstore {background-color: #007dcb} | |
.zocial.meetup {background-color: #ff0026;} | |
.zocial.myspace {background-color: #000;} | |
.zocial.ninetyninedesigns {background-color: #fff; color: #072243;} | |
.zocial.openid {background-color: #f5f5f5; color: #333;} | |
.zocial.paypal {background-color: white; color: #32689a; text-shadow: 0 1px 0 rgba(255,255,255,0.2);} | |
.zocial.pinboard {background-color: blue;} | |
.zocial.pinterest {background-color: #c91618;} | |
.zocial.plancast {background-color: #e7ebed; color: #333;} | |
.zocial.plurk {background-color: #cf682f;} | |
.zocial.podcast {background-color: #9365ce;} | |
.zocial.posterous {background-color: #ffd959; color: #bc7134;} | |
.zocial.quora {background-color: #a82400;} | |
.zocial.rss {background-color: #ff7f25;} | |
.zocial.scribd {background-color: #231c1a;} | |
.zocial.skype {background-color: #00a2ed;} | |
.zocial.smashing {background-color: #ff4f27;} | |
.zocial.songkick {background-color: #ff0050;} | |
.zocial.soundcloud {background-color: #ff4500;} | |
.zocial.spotify {background-color: #60af00;} | |
.zocial.stumbleupon {background-color: #eb4924;} | |
.zocial.tumblr {background-color: #374a61;} | |
.zocial.twitter {background-color: #46c0fb;} | |
.zocial.viadeo {background-color: #fff; color: #000;} | |
.zocial.vimeo {background-color: #00a2cd;} | |
.zocial.weibo {background-color: #faf6f1; color: #000;} | |
.zocial.wikipedia {background-color: #fff; color: #000;} | |
.zocial.windows {background-color: #0052a4; color: #fff;} | |
.zocial.wordpress {background-color: #464646;} | |
.zocial.xing {background-color: #0A5D5E;} | |
.zocial.yahoo {background-color: #a200c2;} | |
.zocial.yelp {background-color: #e60010;} | |
.zocial.youtube {background-color: #f00;} | |
/* | |
The Miscellaneous Buttons | |
These button have no icons and can be general purpose buttons while ensuring consistent button style | |
Credit to @guillermovs for suggesting | |
*/ | |
.zocial.primary, .zocial.secondary {margin: 0.1em 0; padding: 0 1em;} | |
.zocial.primary:before, .zocial.secondary:before {display: none;} | |
.zocial.primary {background-color: #333;} | |
.zocial.secondary {background-color: #f0f0eb; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,0.8);} | |
/* Any browser-specific adjustments */ | |
button::-moz-focus-inner { | |
border: 0; | |
padding: 0; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment