<!-- Feel free to copy and paste the markup below -->

	<h2>Icon Only</h2>

	<!-- Icon-only Branded Twitter button -->
	<a class="share-btn share-btn-branded share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Twitter</span>
	</a>

	<!-- Icon-only Branded Facebook button -->
	<a class="share-btn share-btn-branded share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Facebook</span>
	</a>

	<!-- Icon-only Branded Google+ button -->
	<a class="share-btn share-btn-branded share-btn-googleplus"
	   href="https://plus.google.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Google+">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Google+</span>
	</a>

	<!-- Icon-only Branded Reddit button -->
	<a class="share-btn share-btn-branded share-btn-reddit"
	   href="http://www.reddit.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Reddit+">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Reddit</span>
	</a>

	<!-- Icon-only Branded Tumblr button -->
	<a class="share-btn share-btn-branded share-btn-tumblr"
	   href="https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Tumblr">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Tumblr</span>
	</a>

	<!-- Icon-only Branded LinkedIn button -->
	<a class="share-btn share-btn-branded share-btn-linkedin"
	   href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on LinkedIn">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">LinkedIn</span>
	</a>

	<!-- Icon-only Branded Pinterest button -->
	<a class="share-btn share-btn-branded share-btn-pinterest"
	   href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Pinterest">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Pinterest</span>
	</a>

	<!-- Icon-only Branded StumbleUpon button -->
	<a class="share-btn share-btn-branded share-btn-stumbleupon"
	   href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on StumbleUpon">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">StumbleUpon</span>
	</a>

	<!-- Icon-only Branded Delicious button -->
	<a class="share-btn share-btn-branded share-btn-delicious"
	   href="https://delicious.com/save?v=5&noui&jump=close&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Delicious">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Delicious</span>
	</a>

	<!-- Icon-only Email button -->
	<a class="share-btn share-btn-email"
	   href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share via Email">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">Email</span>
	</a>

	<!-- Icon-only More/share button -->
	<a class="share-btn share-btn-more"
	   href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="More share options">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">More</span>
	</a>

	<h2>Brand Colors</h2>

	<!-- Branded Twitter button -->
	<a class="share-btn share-btn-branded share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Twitter</span>
	</a>

	<!-- Branded Facebook button -->
	<a class="share-btn share-btn-branded share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Facebook</span>
	</a>

	<!-- Branded Google+ button -->
	<a class="share-btn share-btn-branded share-btn-googleplus"
	   href="https://plus.google.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Google+">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Google+</span>
	</a>

	<!-- Branded Reddit button -->
	<a class="share-btn share-btn-branded share-btn-reddit"
	   href="http://www.reddit.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Reddit+">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Reddit</span>
	</a>

	<!-- Branded Tumblr button -->
	<a class="share-btn share-btn-branded share-btn-tumblr"
	   href="https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Tumblr">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Tumblr</span>
	</a>

	<!-- Divider only used for demo, don't copy this -->
	<div class="divider" role="presentation"></div>

	<!-- Branded LinkedIn button -->
	<a class="share-btn share-btn-branded share-btn-linkedin"
	   href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on LinkedIn">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">LinkedIn</span>
	</a>

	<!-- Branded Pinterest button -->
	<a class="share-btn share-btn-branded share-btn-pinterest"
	   href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Pinterest">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Pinterest</span>
	</a>

	<!-- Branded StumbleUpon button -->
	<a class="share-btn share-btn-branded share-btn-stumbleupon"
	   href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on StumbleUpon">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">StumbleUpon</span>
	</a>

	<!-- Branded Delicious button -->
	<a class="share-btn share-btn-branded share-btn-delicious"
	   href="https://delicious.com/save?v=5&noui&jump=close&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Delicious">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Delicious</span>
	</a>

	<h2>Default</h2>

	<!-- Medium Twitter button -->
	<a class="share-btn share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Twitter</span>
	</a>

	<!-- Medium Facebook button -->
	<a class="share-btn share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Facebook</span>
	</a>

	<!-- Medium Email button -->
	<a class="share-btn share-btn-email"
	   href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share via Email">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Email</span>
	</a>

	<!-- Medium More/share button -->
	<a class="share-btn share-btn-more"
	   href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="More share options">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">More</span>
	</a>

	<h2>Inverse</h2>

	<a class="share-btn share-btn-inverse share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Twitter</span>
	</a>

	<a class="share-btn share-btn-inverse share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Facebook</span>
	</a>

	<a class="share-btn share-btn-inverse share-btn-email"
	   href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share via Email">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Email</span>
	</a>

	<a class="share-btn share-btn-inverse share-btn-more"
	   href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="More share options">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">More</span>
	</a>

	<h2 class="heading-sizes">Sizes</h2>

	<h3>Small</h3>

	<!-- Small Twitter button -->
	<a class="share-btn share-btn-sm share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Twitter</span>
	</a>

	<!-- Small Facebook button -->
	<a class="share-btn share-btn-sm share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Facebook</span>
	</a>

	<!-- Small Email button -->
	<a class="share-btn share-btn-sm share-btn-email"
	   href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share via Email">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Email</span>
	</a>

	<!-- Small More/share button -->
	<a class="share-btn share-btn-sm share-btn-more"
	   href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="More share options">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">More</span>
	</a>

	<h3>Medium (default)</h3>

	<!-- Medium Twitter button -->
	<a class="share-btn share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Twitter</span>
	</a>

	<!-- Medium Facebook button -->
	<a class="share-btn share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Facebook</span>
	</a>

	<!-- Medium Email button -->
	<a class="share-btn share-btn-email"
	   href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share via Email">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Email</span>
	</a>

	<!-- Medium More/share button -->
	<a class="share-btn share-btn-more"
	   href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="More share options">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">More</span>
	</a>

	<h3>Large</h3>

	<!-- Large Twitter button -->
	<a class="share-btn share-btn-lg share-btn-twitter"
	   href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
	   title="Share on Twitter">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Twitter</span>
	</a>

	<!-- Large Facebook button -->
	<a class="share-btn share-btn-lg share-btn-facebook"
	   href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share on Facebook">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Facebook</span>
	</a>

	<!-- Large Email button -->
	<a class="share-btn share-btn-lg share-btn-email"
	   href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="Share via Email">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text">Email</span>
	</a>

	<!-- Large More/share button -->
	<a class="share-btn share-btn-lg share-btn-more"
	   href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
	   title="More share options">
		<span class="share-btn-icon"></span>
		<span class="share-btn-text-sr">More</span>
	</a>
// Base (specific to demo, not needed for buttons)
body {
  padding: 10px 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 10px 10px 0;
  color: #222;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

p {
  color: black;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.heading-sizes {
	margin-top: 30px;
}

.divider {
	height: 5px;
}

// Icons
@font-face {
	font-family: 'share-buttons';
	// Fonts are served from Share Buttons v1.0.0 repository via RawGit
	src:url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.eot?gpra60');
	src:url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.eot?#iefixgpra60') format('embedded-opentype'),
		url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.woff?gpra60') format('woff'),
		url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.ttf?gpra60') format('truetype'),
		url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.svg?gpra60#share-buttons') format('svg');
	font-weight: normal;
	font-style: normal;
}

.share-btn-icon {
	font-family: 'share-buttons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.share-btn-email .share-btn-icon:before {
	content: "\e945";
}

.share-btn-more .share-btn-icon:before {
	content: "\ea82";
}

.share-btn-googleplus .share-btn-icon:before {
	content: "\ea88";
}

.share-btn-facebook .share-btn-icon:before {
	content: "\ea8c";
}

.share-btn-twitter .share-btn-icon:before {
	content: "\ea91";
}

.share-btn-github .share-btn-icon:before {
	content: "\eab4";
}

.share-btn-tumblr .share-btn-icon:before {
	content: "\eabb";
}

.share-btn-reddit .share-btn-icon:before {
	content: "\eac7";
}

.share-btn-linkedin .share-btn-icon:before {
	content: "\eac8";
}

.share-btn-delicious .share-btn-icon:before {
	content: "\eacc";
}

.share-btn-stumbleupon .share-btn-icon:before {
	content: "\eace";
}

.share-btn-pinterest .share-btn-icon:before {
	content: "\ead0";
}

.share-btn,
.share-btn * {
  box-sizing: border-box;
}

// Reset box-sizing
.share-btn,
.share-btn *,
.share-btn *:before,
.share-btn *:after {
	box-sizing: border-box;
}

// All share button styles are enclosed in .share-btn
.share-btn {
	@color-bg: #e0e0e0;
	@color: #111;
	
	position: relative;
	display: inline-block;
	height: 24px;
	margin: 0;
	padding: 2px 8px;
	line-height: 1.53;
	letter-spacing: .04em;
	vertical-align: top;
	font-size: 12px;
	font-weight: bold;
	font-family: "Helvetica Neue", Arial, sans-serif;
	color: @color;
	background: @color-bg;
	border: 1px solid darken(@color-bg, 10%);
	border-radius: 2px;
	text-decoration: none;
	transition: all 0.2s ease;
	
	&:hover,
	&:focus {
		background: darken(@color-bg, 5%);
		border-color: darken(@color-bg, 15%);
		text-decoration: none;
		color: @color;
	}
	
	&:active {
		background: darken(@color-bg, 10%);
		border-color: darken(@color-bg, 20%);
		text-decoration: none;
		color: @color;
	}
	
	&.share-btn-sm {
		height: 20px;
		font-size: 10px;
		padding: 0 8px;
		line-height: 1.6;
	}
	
	&.share-btn-lg {
		height: 28px;
		font-size: 16px;
		line-height: 1.4;
	}
	
	// More button
	.share-btn-text-sr {
		// Screen readers only
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		border: 0;
	}
	
	// Branded
	
	&.share-btn-branded {
		color: #fff;
	}
	
	&.share-btn-branded.share-btn-twitter {
		@color-brand: #55acee;
		background: @color-brand;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-facebook {
		@color-brand: #3b5998;
		background: @color-brand;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-googleplus {
		@color-brand: #dd4b39;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-tumblr {
		@color-brand: #35465c;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-reddit {
		@color-brand: #ff4500;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-linkedin {
		@color-brand: #0976b4;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-delicious {
		@color-brand: #3399ff;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-stumbleupon {
		@color-brand: #eb4924;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	&.share-btn-branded.share-btn-pinterest {
		@color-brand: #cc2127;
		background: @color-brand;
		color: #fff;
		border-color: darken(@color-brand, 5%);
		&:hover, &:focus {
			background: darken(@color-brand, 5%);
			border-color: darken(@color-brand, 10%);
		}
		&:active {
			background: darken(@color-brand, 10%);
			border-color: darken(@color-brand, 15%);
		}
	}
	
	// Inverse
	&.share-btn-inverse {
		color: #fff - @color;
		background: #fff - @color-bg;
		border-color: darken(#fff - @color-bg, 10%);
		&:hover,
		&:focus {
			background: darken(#fff - @color-bg, 5%);
			border-color: darken(#fff - @color-bg, 15%);
			color: #fff - @color;
		}
		&:active {
			background: darken(#fff - @color-bg, 10%);
			border-color: darken(#fff - @color-bg, 20%);
			color: #fff - @color;
		}
	}
	
	// Share icon
	&.share-btn-twitter .share-btn-icon,
	&.share-btn-googleplus .share-btn-icon,
	&.share-btn-tumblr .share-btn-icon,
	&.share-btn-linkedin .share-btn-icon,
	&.share-btn-pinterest .share-btn-icon,
	&.share-btn-stumbleupon .share-btn-icon,
	&.share-btn-delicious .share-btn-icon,
	&.share-btn-more .share-btn-icon {
		position: relative;
		top: 1px;
	}
	
	// Super hacky but needed until a better fix
	@-moz-document url-prefix() {
		&.share-btn-twitter .share-btn-icon,
		&.share-btn-googleplus .share-btn-icon,
		&.share-btn-tumblr .share-btn-icon,
		&.share-btn-linkedin .share-btn-icon,
		&.share-btn-pinterest .share-btn-icon,
		&.share-btn-stumbleupon .share-btn-icon,
		&.share-btn-delicious .share-btn-icon,
		&.share-btn-more .share-btn-icon {
			top: 0;
		}
	}

	&.share-btn-more.share-btn-lg .share-btn-icon {
		top: 2px;
	}
	
	// Text
	.share-btn-text {
		padding-left: 2px;
	}
}
View Compiled 
(function(){
  
  var shareButtons = document.querySelectorAll(".share-btn");

  if (shareButtons) {
      [].forEach.call(shareButtons, function(button) {
      button.addEventListener("click", function(event) {
 				var width = 650,
            height = 450;

        event.preventDefault();

        window.open(this.href, 'Share Dialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width='+width+',height='+height+',top='+(screen.height/2-height/2)+',left='+(screen.width/2-width/2));
      });
    });
  }

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.