Creating an Awesome Zoom Out Share Button

March 2, 2012 at 6:00 pm By
Download Demo

When it comes to attracting attention to yourself on the internet, nothing does a better job than share buttons. Whether its twitter or google plus, social media probably has a huge impact on your traffic. I set out to create an attention grabbing way to display buttons, and came up with this: a circle that expands revealing a bunch of share buttons on hover. Read on to learn out how to do it, and check out the demo!

Structure

To begin I created the HTML structure of the file, consisting of a lot of divs and share buttons. This will be the basis of our share button. The structure looks a bit like this:

<div id="buttons">
    <div class="holder identity"> </div>
    <div class="holder identity"> </div>
    ....
</div>

Fill that up with buttons and you end up with something that looks like this. It’s also necessary to add some text inside a div called .text. This is so the user knows what this mysterious circle does, and to draw a little more attention in its direction.

	<div id="buttons">
	
		<div class="text">SHARE</div>
		<div class="holder twitter">
			<a href="https://twitter.com/share" class="twitter-share-button" data-via="inserthtml" data-size="large">Tweet</a>
		</div>
		<div class="holder pinterest">
			<a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">Pin It</a>
		</div>
		<div class="holder stumbleupon">
			<su:badge layout="1"></su:badge>
		</div>
		<div class="holder gplus">
			<div class="g-plusone"></div>
		</div>
		<div class="holder reddit">
			<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>
		</div>
		<div class="holder facebook">
			<div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>
			<div id="fb-root"></div>
		</div>
	
	
	</div>

Oh, and don’t forget to include all the necessary Javascript, either in a separate Javascript file or at the end of your document. If you want to use the buttons I’ve used above, just use this, otherwise you’ll have to figure it out yourself:



 <script type="text/javascript"> 
(function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
})(); 
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
 
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=231759450196872";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 </script>
 
 <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Adding Styles

I was pleasantly surprised that to accomplish this I only had to use transitions. Animations (especially since you have to add vendor prefixes) can take up a considerable amount of room in your stylesheet. To begin I styled the main button holder, adding a border and box shadow. On hover we want it to expand but keep the same center, so some position was required. The large border-radius is to ensure we get a circle. Some transitions were added to create a smooth zoom effect.


#buttons {
	position: relative;
	border: 10px solid #ddd;
	border-radius: 100px;
	width: 80px;
	margin: 30px;
	box-shadow: 0px 0px 10px #ddd, 0px 10px 0px #aaa;
	height: 80px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
}

#buttons:hover {
	border: 15px solid #ddd;
	width: 160px;
	height: 160px;
	left: -40px;
	opacity: 1;
	top: -40px;
}


Now we want to edit the actual divs so they all look correct. First things first, lets move all the divs to the center and set their opacity to 0. Then when we hover over them we want their opacity to return to 1. I also added some styles to the text, just to center everything.


#buttons div {
	position: absolute;
	opacity: 0;
	min-width: 100px;
	top: 15px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
}

#buttons:hover div {
	opacity: 1;
}

#buttons .text {
	z-index: 5000;
	top: 25px;
	opacity: 1;
	left: -5px;
	text-shadow: 0 3px 0px rgba(255,255,255,1);
	font-size: 26px;
	font-weight: bold;
}

#buttons:hover .text {
	top: 60px;
	left: 35px;
	opacity: 0;
}

Next we just have to position all the buttons. This took a little trial and error, but it wasn’t too difficult. Since we set the actual button holder to position: relative; and the divs to position: absolute; we only need to edit the top and left properties. I also added some extra CSS for the Facebook button to remove the text.


#buttons:hover div:nth-of-type(2) {
	top: 0;
	left: -20px;
}

#buttons:hover div:nth-of-type(3) {
	top: 5px;
	left: 120px;
}

#buttons:hover div:nth-of-type(4) {
	top: 65px;
	left: -68px;
}

#buttons:hover div:nth-of-type(5) {
	top: 48px;
	left: 155px;
}

#buttons:hover div:nth-of-type(6) {
	top: 125px;
	left: -45px;
}

#buttons:hover div:nth-of-type(7) {
	top: 105px;
	left: 125px;
}

.fb_edge_widget_with_comment iframe {
    width: 65px !important;
}

Once you’ve done that, save everything and try it out! If you’re feeling lazy you can download below or check out the demo page for an actual look at it! Thanks for reading, and if you liked this little tutorial don’t forget to share. It really helps.