AddThis

Instruction and Assets

Based off Zurb's Super Awesome Buttons with CSS3, we've created modern sharing buttons.

Download Example Try Demo

The CSS

/* CSS3 Styled Buttons */
			
.addthis_share_btn a, .addthis_share_btn a:visited {
	background: #222 url(images/btn-overlay.png) repeat-x;
	display: inline-block; 
	padding: 6px 12px; 
	font-family: arial,helvetica,lucida,verdana,sans-serif;
	font-size: 12px;
	line-height: 1em;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;	
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);	
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}
.addthis_share_btn a:hover { background-color: #111; color: #fff; }
.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a span {
	background: url(images/icon-addthis.gif) no-repeat left;
	padding: 1px 0 1px 18px;
}

The HTML

<!-- AddThis Share Button -->
<div class="addthis_toolbox addthis_share_btn">
	<a href="http://addthis.com/bookmark.php" class="addthis_button_compact">
	<span>Share</span></a>
</div>

The Javascript

Include the following AddThis script file anywhere in your page (usually before the closing </body> tag):

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR-PROFILE-ID"></script>

This added config offsets the top of the AddThis share menu by a few pixels:

<script type="text/javascript">
var addthis_config = {
   ui_offset_top: 16
};
</script>

Important: For '#pubid=YOUR-PROFILE-ID' above, change 'YOUR-PROFILE-ID' to your Profile ID if you want analytics data to be collected. If you do not want analytics, this phrase can be removed.

For more information about customizing the AddThis toolbox, please checkout the Rendering Link Decoration section of the Client API. We also have the complete list of Services, which might come in handy.

Note: This example works best in browsers that have support for CSS3, such as the latest versions of Safari, Chrome, and Firefox.