Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Beautiful CSS3 Button Set</h1>
<h2 id="popular-kids">Required</h2>
	<a href="#" class="haeck facebook">Sign in with Facebook</a>
	<a href="#" class="haeck googleplus">Sign in with Google+</a>
	<a href="#" class="haeck twitter">Sign in with Twitter</a>
	<a href="#" class="haeck linkedin">Sign in with LinkedIn</a>

	<h2 id="cool-kids">Suggested</h2>
	<a href="#" class="haeck dropbox">Sync with Dropbox</a>
	<a href="#" class="haeck evernote">Clip to Evernote</a>
	<a href="#" class="haeck forrst">Follow me on Forrst</a>
	<a href="#" class="haeck dribbble">Sign in with Dribbble</a>
	<a href="#" class="haeck cloudapp">Sign in to CloudApp</a>
	<a href="#" class="haeck github">Fork me on Github</a>
	<a href="#" class="haeck spotify">Play on Spotify</a>
	<a href="#" class="haeck instapaper">Read It Later</a>
	<a href="#" class="haeck soundcloud">Follow me on Soundcloud</a>
	<a href="#" class="haeck tumblr">Follow me on Tumblr</a>
	<a href="#" class="haeck smashing">Read on Smashing Magazine</a>
	<a href="#" class="haeck itunes">Available on iTunes</a>
	<a href="#" class="haeck appstore">Available on the App Store</a>
	<a href="#" class="haeck macstore">Available on the Mac App Store</a>
	<a href="#" class="haeck android">Available on Android Market</a>
	<a href="#" class="haeck pinterest">Follow me on Pinterest</a>
	<a href="#" class="haeck quora">Follow me on Quora</a>
	<a href="#" class="haeck lanyrd">Attend on Lanyrd</a>

	<h2 id="not-so-cool-kids">Useful</h2>
	<a href="#" class="haeck paypal">Pay with Paypal</a>
	<a href="#" class="haeck amazon">Sign in with Amazon</a>
	<a href="#" class="haeck skype">Call me on Skype</a>
	<a href="#" class="haeck lastfm">Sign in with Last.fm</a>
	<a href="#" class="haeck yelp">Write a review on Yelp</a>
	<a href="#" class="haeck foursquare">Check in with foursquare</a>
	<a href="#" class="haeck klout">Influence with Klout</a>

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

	<h2 id="smelly-kids">Vintage</h2>
	<a href="#" class="haeck yahoo">Submit resume for CEO</a>
	<a href="#" class="haeck ie">Download Internet Explorer 5</a>
	<a href="#" class="haeck meetup">Report bugs with Meetup.com</a>
	<a href="#" class="haeck openid">Learn how-to-use OpenID</a>
	<a href="#" class="haeck html5">Register now for HTML6</a>
	<a href="#" class="haeck aol">Chat with your parents</a>

	<h2 id="quiet-kids">Functional</h2>
	<a href="#" class="haeck guest">Sign in as guest</a>
	<a href="#" class="haeck creativecommons">View Creative Commons Licence</a>
	<a href="#" class="haeck rss">Subscribe to RSS</a>
	<a href="#" class="haeck chrome">Add to Chrome</a>
	<a href="#" class="haeck eventasaurus">Sign up for Eventasaurus</a>
	<a href="#" class="haeck weibo">Join me on Weibo</a>
	<a href="#" class="haeck plurk">Sign in with Plurk</a>
	<a href="#" class="haeck grooveshark">Play on Grooveshark</a>
	<a href="#" class="haeck blogger">Post on Blogger</a>
	<a href="#" class="haeck viadeo">Sign in with Viadeo</a>
	<a href="#" class="haeck podcast">Subscribe to this Podcast</a>
	<a href="#" class="haeck fivehundredpx">View Portfolio on 500px</a>
	<a href="#" class="haeck bitcoin">Bitcoin accepted here</a>
	<a href="#" class="haeck ninetyninedesigns">View Portfolio on 99Designs</a>
	<a href="#" class="haeck pinboard">Bookmark with Pinboard</a>
	<a href="#" class="haeck stumbleupon">Stumble!</a>
	<a href="#" class="haeck myspace">Find me on Myspace</a>
	<a href="#" class="haeck windows">Sign in with Windows Live</a>
	<a href="#" class="haeck eventful">Find Events with Eventful</a>
	<a href="#" class="haeck xing">Sign in with Xing</a>
	<a href="#" class="haeck flickr">Upload to Flickr</a>
	<a href="#" class="haeck delicious">Sign in with Del.icio.us</a>
	<a href="#" class="haeck googleplay">Download from Google Play</a>
	<a href="#" class="haeck opentable">Reserve with OpenTable</a>
	<a href="#" class="haeck digg">Digg this</a>
	<a href="#" class="haeck reddit">Share on Reddit</a>

	<h2 id="multipurpose-kids">Useful</h2>
	<a href="#" class="haeck call">Call a phone</a>
	<a href="#" class="haeck email">Send a message</a>
	<a href="#" class="haeck cal">Add to calendar</a>
	<a href="#" class="haeck cart">Add to cart</a>
	<a href="#" class="haeck print">Print this page</a>
	<a href="#" class="haeck primary">Primary action</a>
	<a href="#" class="haeck secondary">Secondary action</a>


	<h2 id="icons">Basic</h2>
	<a href="#" class="haeck icon facebook">Sign in with Facebook</a>
	<a href="#" class="haeck icon googleplus">Sign in with Google+</a>
	<a href="#" class="haeck icon twitter">Sign in with Twitter</a>
	<a href="#" class="haeck icon google">Sign in with Google</a>
	<a href="#" class="haeck icon linkedin">Sign in with LinkedIn</a>
	<a href="#" class="haeck icon paypal">Pay with Paypal</a>
	<a href="#" class="haeck icon amazon">Sign in with Amazon</a>
	<a href="#" class="haeck icon dropbox">Sync with Dropbox</a>
	<a href="#" class="haeck icon evernote">Clip to Evernote</a>
	<a href="#" class="haeck icon skype">Call me on Skype</a>
	<a href="#" class="haeck icon guest">Sign in as guest</a>
	<a href="#" class="haeck icon spotify">Play on Spotify</a>
	<a href="#" class="haeck icon lastfm">Sign in with Last.fm</a>
	<a href="#" class="haeck icon songkick">Sign in with Songkick</a>
	<a href="#" class="haeck icon forrst">Follow me on Forrst</a>
	<a href="#" class="haeck icon dribbble">Sign in with Dribbble</a>
	<a href="#" class="haeck icon cloudapp">Sign in to CloudApp</a>
	<a href="#" class="haeck icon github">Fork me on Github</a>
	<a href="#" class="haeck pinterest icon">Follow me on Pinterest</a>
	<a href="#" class="haeck quora icon">Follow me on Quora</a>
	<a href="#" class="haeck pinboard icon">Bookmark with Pinboard</a>
	<a href="#" class="haeck lanyrd icon">Attend on Lanyrd</a>
	<a href="#" class="haeck icon itunes">Download on iTunes</a>
	<a href="#" class="haeck icon android">Download on Android</a>
	<a href="#" class="haeck icon disqus">Sign in with Disqus</a>
	<a href="#" class="haeck icon yahoo">Sign in with Yahoo</a>
	<a href="#" class="haeck icon vimeo">Upload to Vimeo</a>
	<a href="#" class="haeck icon chrome">Add to Chrome</a>
	<a href="#" class="haeck icon ie">Get a new browser</a>
	<a href="#" class="haeck icon html5">Made from HTML5</a>
	<a href="#" class="haeck icon instapaper">Read It Later</a>
	<a href="#" class="haeck icon scribd">Read more on Scribd</a>
	<a href="#" class="haeck icon wikipedia">View on Wikipedia</a>
	<a href="#" class="haeck icon flattr">Tip with Flattr</a>
	<a href="#" class="haeck icon tumblr">Follow me on Tumblr</a>
	<a href="#" class="haeck icon posterous">Subscribe to my Posterous</a>
	<a href="#" class="haeck icon gowalla">Check in with Gowalla</a>
	<a href="#" class="haeck icon foursquare">Check in with foursquare</a>
	<a href="#" class="haeck icon yelp">Write a review on Yelp</a>
	<a href="#" class="haeck icon soundcloud">Follow me on Soundcloud</a>
	<a href="#" class="haeck icon smashing">Read on Smashing Magazine</a>
	<a href="#" class="haeck icon wordpress">Sign in with WordPress</a>
	<a href="#" class="haeck icon intensedebate">Sign in with IntenseDebate</a>
	<a href="#" class="haeck icon openid">Sign in with OpenID</a>
	<a href="#" class="haeck icon gmail">Sign in with Gmail</a>
	<a href="#" class="haeck icon eventbrite">Sign in with Eventbrite</a>
	<a href="#" class="haeck icon eventasaurus">Sign in with Eventasaurus</a>
	<a href="#" class="haeck icon meetup">Sign in with Meetup.com</a>
	<a href="#" class="haeck icon aol">Sign in with AIM</a>
	<a href="#" class="haeck icon plancast">Follow me on Plancast</a>
	<a href="#" class="haeck icon youtube">Subscribe on YouTube</a>
	<a href="#" class="haeck icon appstore">Available on the Mac App Store</a>
	<a href="#" class="haeck icon creativecommons">View Creative Commons Licence</a>
	<a href="#" class="haeck icon rss">Subscribe to RSS</a>
	<a href="#" class="haeck weibo icon">Follow me on Weibo</a>
	<a href="#" class="haeck plurk icon">Follow me on Plurk</a>
	<a href="#" class="haeck grooveshark icon">Follow me on Grooveshark</a>
	<a href="#" class="haeck blogger icon">Post on Blogger</a>
	<a href="#" class="haeck viadeo icon">Sign in with Viadeo</a>
	<a href="#" class="haeck podcast icon">Subscribe to this Podcast</a>
	<a href="#" class="haeck fivehundredpx icon">View Portfolio on 500px</a>
	<a href="#" class="haeck bitcoin icon">Bitcoin accepted here</a>
	<a href="#" class="haeck ninetyninedesigns icon">View Portfolio on 99Designs</a>
	<a href="#" class="haeck stumbleupon icon">Stumble!</a>
	<a href="#" class="haeck itunes icon">Download on iTunes</a>
	<a href="#" class="haeck myspace icon">Find me on Myspace</a>
	<a href="#" class="haeck windows icon">Sign in with Windows Live</a>
	<a href="#" class="haeck eventful icon">Find Events with Eventful</a>
	<a href="#" class="haeck klout icon">Influence with Klout</a>
	<a href="#" class="haeck xing icon">Sign in with Xing</a>
	<a href="#" class="haeck flickr icon">Upload to Flickr</a>
	<a href="#" class="haeck delicious icon">Sign in with Del.icio.us</a>
	<a href="#" class="haeck googleplay icon">Download from Google Play</a>
	<a href="#" class="haeck opentable icon">Reserve with OpenTable</a>
	<a href="#" class="haeck digg icon">Digg this</a>
	<a href="#" class="haeck reddit icon">Share on Reddit</a>
	<a href="#" class="haeck call icon">Call a phone</a>
	<a href="#" class="haeck email icon">Send a message</a>
	<a href="#" class="haeck cal icon">Add to calendar</a>
	<a href="#" class="haeck print icon">Print this page</a>
	<a href="#" class="haeck cart icon">Add to cart</a>

<p><a href="https://haeckdesign.com/" title="Haeck Design - Raleigh, NC">via Haeck Design</a></p>
              
            
!

CSS

              
                @font-face {
	font-family: 'haeck';
	font-style: normal;
	font-weight: normal;
  src:url('https://s3-us-west-2.amazonaws.com/haeck/css3buttons/fonts/haeck-regular-webfont.eot?-7pddy2');
	src:url('https://s3-us-west-2.amazonaws.com/haeck/css3buttons/fonts/haeck-regular-webfont.eot?#iefix-7pddy2') format('embedded-opentype'),
		url('https://s3-us-west-2.amazonaws.com/haeck/css3buttons/fonts/haeck-regular-webfont.woff?-7pddy2') format('woff'),
		url('https://s3-us-west-2.amazonaws.com/haeck/css3buttons/fonts/haeck-regular-webfont.ttf?-7pddy2') format('truetype'),
		url('https://s3-us-west-2.amazonaws.com/haeck/css3buttons/fonts/haeck-regular-webfont.svg?-7pddy2#Get-Social-Font') format('svg');
	font-weight: normal;
	font-style: normal;
}

.haeck,
a.haeck {
	border: 1px solid #777;
	border-color: rgba(0,0,0,0.2);
	border-bottom-color: #333;
	border-bottom-color: rgba(0,0,0,0.4);
	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.4), inset 0 0 0.1em rgba(255,255,255,0.9);
	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.5);
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	z-index: 100;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
}

.haeck::before {
	content: "";
	border-right: 0.075em solid rgba(0,0,0,0.1);
	float: left;
	font: 120%/1.65 haeck;
	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);
	-webkit-font-smoothing: antialiased;
}

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

.haeck.icon {
	overflow: hidden;
	max-width: 2.4em;
	padding-left: 0;
	padding-right: 0;
	max-height: 2.15em;
	white-space: nowrap;
}
.haeck.icon::before {
	padding: 0;
	width: 2em;
	height: 2em;
	box-shadow: none;
	border: none;
}

.haeck {
  margin:4px;
	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,.05) 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));
}

.haeck:hover, .haeck: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,.15)), color-stop(49%, rgba(255,255,255,.15)), color-stop(51%, rgba(0,0,0,.1)), to(rgba(0,0,0,.15)));
	background-image: -webkit-linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15));
	background-image: linear-gradient(rgba(255,255,255,.15) 49%, rgba(0,0,0,.1) 51%, rgba(0,0,0,.15));
}

.haeck: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));
}

.haeck.bitcoin,
.haeck.cloudapp,
.haeck.dropbox,
.haeck.email,
.haeck.eventful,
.haeck.github,
.haeck.gmail,
.haeck.instapaper,
.haeck.itunes,
.haeck.ninetyninedesigns,
.haeck.openid,
.haeck.plancast,
.haeck.posterous,
.haeck.reddit,
.haeck.secondary,
.haeck.viadeo,
.haeck.weibo,
.haeck.wikipedia {
	border: 1px solid #aaa;
	border-color: rgba(0,0,0,0.3);
	border-bottom-color: #777;
	border-bottom-color: rgba(0,0,0,0.5);
	-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.8);
}


.haeck.bitcoin:focus,
.haeck.bitcoin:hover,
.haeck.dropbox:focus,
.haeck.dropbox:hover,
.haeck.email:focus,
.haeck.email:hover,
.haeck.eventful:focus,
.haeck.eventful:hover,
.haeck.github:focus,
.haeck.github:hover,
.haeck.gmail:focus,
.haeck.gmail:hover,
.haeck.instapaper:focus,
.haeck.instapaper:hover,
.haeck.itunes:focus,
.haeck.itunes:hover,
.haeck.ninetyninedesigns:focus,
.haeck.ninetyninedesigns:hover,
.haeck.openid:focus,
.haeck.openid:hover,
.haeck.plancast:focus,
.haeck.plancast:hover,
.haeck.posterous:focus,
.haeck.posterous:hover,
.haeck.reddit:focus,
.haeck.reddit:hover,
.haeck.secondary:focus,
.haeck.secondary:hover,
.haeck.twitter:focus,
.haeck.viadeo:focus,
.haeck.viadeo:hover,
.haeck.weibo:focus,
.haeck.weibo:hover,
.haeck.wikipedia:focus,
.haeck.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));
}


.haeck.bitcoin:active,
.haeck.dropbox:active,
.haeck.email:active,
.haeck.eventful:active,
.haeck.github:active,
.haeck.gmail:active,
.haeck.instapaper:active,
.haeck.itunes:active,
.haeck.ninetyninedesigns:active,
.haeck.openid:active,
.haeck.plancast:active,
.haeck.posterous:active,
.haeck.reddit:active,
.haeck.secondary:active,
.haeck.viadeo:active,
.haeck.weibo:active,
.haeck.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));
}

.haeck.amazon::before {content: "\E040";}
.haeck.android::before {content: "\E005";}
.haeck.aol::before {content: "\E001";}
.haeck.appstore::before {content: "\E020";}
.haeck.bitcoin::before {content: "\E011"; color: #f7931a;}
.haeck.blogger::before {content: "\E021";}
.haeck.call::before {content: "\E016";}
.haeck.cal::before {content: "\E00D";}
.haeck.cart::before {content: "\E06A";}
.haeck.chrome::before {content: "\E03A";}
.haeck.cloudapp::before {content: "\E042";}
.haeck.creativecommons::before {content: "\E022";}
.haeck.delicious::before {content: "\E002";}
.haeck.digg::before {content: "\E01A";}
.haeck.disqus::before {content: "\E030";}
.haeck.dribbble::before {content: "\E023";}
.haeck.dropbox::before {content: "\E043"; color: #1f75cc;}
.haeck.email::before {content: "\E03C"; color: #312c2a;}
.haeck.eventasaurus::before {content: "\E055"; color: #9de428;}
.haeck.eventbrite::before {content: "\E05B";}
.haeck.eventful::before {content: "\E006"; color: #0066CC;}
.haeck.evernote::before {content: "\E024";}
.haeck.facebook::before {content: "\E045";}
.haeck.fivehundredpx::before {content: "\E00F"; color: #29b6ff;}
.haeck.flattr::before {content: "\E004";}
.haeck.flickr::before {content: "\E025";}
.haeck.forrst::before {content: "\E019"; color: #50894f;}
.haeck.foursquare::before {content: "\E013";}
.haeck.github::before {content: "\E046";}
.haeck.gmail::before {content: "\E04C"; color: #f00;}
.haeck.google::before {content: "\E026";}
.haeck.googleplay::before {content: "\E05E";}
.haeck.googleplus::before {content: "\E00A";}
.haeck.gowalla::before {content: "\E01F";}
.haeck.grooveshark::before {content: "\E017";}
.haeck.guest::before {content: "\E01E";}
.haeck.html5::before {content: "\E014";}
.haeck.ie::before {content: "\E015";}
.haeck.instapaper::before {content: "\E028";}
.haeck.intensedebate::before {content: "\E05A";}
.haeck.itunes::before {content: "\E048"; color: #1a6dd2;}
.haeck.klout::before {content: "\E02A"; }
.haeck.lanyrd::before {content: "\E00C";}
.haeck.lastfm::before {content: "\E04B";}
.haeck.linkedin::before {content: "\E02B";}
.haeck.macstore::before {content: "\E03D";}
.haeck.meetup::before {content: "\E02C";}
.haeck.myspace::before {content: "\E03E";}
.haeck.ninetyninedesigns::before {content: "\E018"; color: #f50;}
.haeck.openid::before {content: "\E04E"; color: #ff921d;}
.haeck.opentable::before {content: "\E05F";}
.haeck.paypal::before {content: "\E003";}
.haeck.pinboard::before {content: "\E04D";}
.haeck.pinterest::before {content: "\E010";}
.haeck.plancast::before {content: "\E02F";}
.haeck.plurk::before {content: "\E049";}
.haeck.podcast::before {content: "\E03F";}
.haeck.posterous::before {content: "\E05D";}
.haeck.print::before {content: "\E06B";}
.haeck.quora::before {content: "\E050";}
.haeck.reddit::before {content: "\E01D"; color: red;}
.haeck.rss::before {content: "\E031";}
.haeck.scribd::before {content: "\E05C"; color: #00d5ea;}
.haeck.skype::before {content: "\E032";}
.haeck.smashing::before {content: "\E009";}
.haeck.songkick::before {content: "\E04A";}
.haeck.soundcloud::before {content: "\E052";}
.haeck.spotify::before {content: "\E01C";}
.haeck.stumbleupon::before {content: "\E00E";}
.haeck.tumblr::before {content: "\E053";}
.haeck.twitter::before {content: "\E033";}
.haeck.viadeo::before {content: "\E027"; color: #f59b20;}
.haeck.vimeo::before {content: "\E035";}
.haeck.weibo::before {content: "\E029"; color: #e6162d;}
.haeck.wikipedia::before {content: "\E00B";}
.haeck.windows::before {content: "\E036";}
.haeck.xing::before {content: "\E037"}
.haeck.wordpress::before {content: "\E056";}
.haeck.yahoo::before {content: "\E038";}
.haeck.yelp::before {content: "\E058";}
.haeck.youtube::before {content: "\E034";}
.haeck.amazon {background-color: #ffad1d; color: #030037; text-shadow: 0 1px 0 rgba(255,255,255,0.5);}
.haeck.android {background-color: #a4c639;}
.haeck.aol {background-color: #f00;}
.haeck.appstore {background-color: #000;}
.haeck.bitcoin {background-color: #efefef; color: #4d4d4d;}
.haeck.blogger {background-color: #ee5a22;}
.haeck.call {background-color: #008000;}
.haeck.cal {background-color: #d63538;}
.haeck.cart {background-color: #333;}
.haeck.chrome {background-color: #006cd4;}
.haeck.cloudapp {background-color: #fff; color: #312c2a;}
.haeck.creativecommons {background-color: #000;}
.haeck.delicious {background-color: #3271cb;}
.haeck.digg {background-color: #164673;}
.haeck.disqus {background-color: #5d8aad;}
.haeck.dribbble {background-color: #ea4c89;}
.haeck.dropbox {background-color: #fff; color: #312c2a;}
.haeck.email {background-color: #f0f0eb; color: #312c2a;}
.haeck.eventasaurus {background-color: #192931; color: #fff;}
.haeck.eventbrite {background-color: #ff5616;}
.haeck.eventful {background-color: #fff; color: #47ab15;}
.haeck.evernote {background-color: #6bb130; color: #fff;}
.haeck.facebook {background-color: #4863ae;}
.haeck.fivehundredpx {background-color: #333;}
.haeck.flattr {background-color: #8aba42;}
.haeck.flickr {background-color: #ff0084;}
.haeck.forrst {background-color: #1e360d;}
.haeck.foursquare {background-color: #44a8e0;}
.haeck.github {background-color: #fbfbfb; color: #050505;}
.haeck.gmail {background-color: #efefef; color: #222;}
.haeck.google {background-color: #4e6cf7;}
.haeck.googleplay {background-color: #000;}
.haeck.googleplus {background-color: #dd4b39;}
.haeck.gowalla {background-color: #ff720a;}
.haeck.grooveshark {background-color: #111; color:#eee;}
.haeck.guest {background-color: #1b4d6d;}
.haeck.html5 {background-color: #ff3617;}
.haeck.ie {background-color: #00a1d9;}
.haeck.instapaper {background-color: #eee; color: #222;}
.haeck.intensedebate {background-color: #0099e1;}
.haeck.klout {background-color: #e34a25;}
.haeck.itunes {background-color: #efefeb; color: #312c2a;}
.haeck.lanyrd {background-color: #2e6ac2;}
.haeck.lastfm {background-color: #dc1a23;}
.haeck.linkedin {background-color: #0083a8;}
.haeck.macstore {background-color: #007dcb}
.haeck.meetup {background-color: #ff0026;}
.haeck.myspace {background-color: #000;}
.haeck.ninetyninedesigns {background-color: #fff; color: #072243;}
.haeck.openid {background-color: #f5f5f5; color: #333;}
.haeck.opentable {background-color: #990000;}
.haeck.paypal {background-color: #fff; color: #32689a; text-shadow: 0 1px 0 rgba(255,255,255,0.5);}
.haeck.pinboard {background-color: blue;}
.haeck.pinterest {background-color: #c91618;}
.haeck.plancast {background-color: #e7ebed; color: #333;}
.haeck.plurk {background-color: #cf682f;}
.haeck.podcast {background-color: #9365ce;}
.haeck.posterous {background-color: #ffd959; color: #bc7134;}
.haeck.print {background-color: #f0f0eb; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,0.8);}
.haeck.quora {background-color: #a82400;}
.haeck.reddit {background-color: #fff; color: #222;}
.haeck.rss {background-color: #ff7f25;}
.haeck.scribd {background-color: #231c1a;}
.haeck.skype {background-color: #00a2ed;}
.haeck.smashing {background-color: #ff4f27;}
.haeck.songkick {background-color: #ff0050;}
.haeck.soundcloud {background-color: #ff4500;}
.haeck.spotify {background-color: #60af00;}
.haeck.stumbleupon {background-color: #eb4924;}
.haeck.tumblr {background-color: #374a61;}
.haeck.twitter {background-color: #46c0fb;}
.haeck.viadeo {background-color: #fff;  color: #000;}
.haeck.vimeo {background-color: #00a2cd;}
.haeck.weibo {background-color: #faf6f1; color: #000;}
.haeck.wikipedia {background-color: #fff; color: #000;}
.haeck.windows {background-color: #0052a4; color: #fff;}
.haeck.wordpress {background-color: #464646;}
.haeck.xing {background-color: #0A5D5E;}
.haeck.yahoo {background-color: #a200c2;}
.haeck.yelp {background-color: #e60010;}
.haeck.youtube {background-color: #f00;}
.haeck.primary, .haeck.secondary {margin: 0.1em 0; padding: 0 1em;}
.haeck.primary::before, .haeck.secondary::before {display: none;}
.haeck.primary {background-color: #333;}
.haeck.secondary {background-color: #f0f0eb; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,0.8);}

/* browser-specific adjustments */

button::-moz-focus-inner {
	border: 0;
	padding: 0;
}




body {
background: #e2e2e2;
color: #555;
font-family: "Helvetica", sans-serif;
margin:20px;
}
h1 {font-family:'Arial';color:#999;}
h2 {
font-size: 17px;
font-weight: normal;
padding: 0 0 0.2em;
  margin-top:30px;
border-bottom: 1px solid #ccc;
}
              
            
!

JS

              
                
              
            
!
999px

Console