<div id="share-buttons" class="button">
	  <button>Share</button>
	  <div id="share-buttons-mask"></div>
	  <a href="#"><i class="mf-64 mf-facebook"></i></a>
	  <a href="#"><i class="mf-64 mf-twitter"></i></a>
	  <a href="#"><i class="mf-64 mf-googleplus"></i></a>
	  <a href="#"><i class="mf-64 mf-stumbleupon"></i></a>
	  <a href="#"><i class="mf-64 mf-pinterest"></i></a>
  </div>
@import url(http://monsterflat.smarchal.com/monsterflat-1.0-trending/monsterflat-1.0.css);

#share-buttons { 
  position: relative; 
  margin: 150px 50%; 
}
#share-buttons button {
  position: absolute;
  top: -40px;
  left: -40px;
  z-index: 99;
  height: 80px;
  width: 80px;
  border-radius: 40px;
  font-size: 20px;
  cursor: default;
}
#share-buttons-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 0px;
  width: 0px;
  border: 1px solid #ccc;
  background: white;
  transition: all .3s;
}
#share-buttons a { 
  position: absolute; 
  top: -32px; 
  left: -32px; 
  z-index: 1; 
  transition: top .5s ease, left .5s ease, box-shadow .2s;
}
#share-buttons a:hover {
  box-shadow: 0 0 10px #333;
}

/* --- Style --- */
body {
  width: 100%;
  background: #2D2E2F;
  overflow: hidden;
}
button {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  background-color: #f8f8f8;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#dedede));
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  height: 20px;
  line-height: 18px;
  padding: 0 4px;
  text-decoration: none;
  vertical-align: top;
}
window.onload = function(event) {

	var wrapper = document.getElementById('share-buttons');
	var mask 	  = document.getElementById('share-buttons-mask');
	var buttons = wrapper.getElementsByTagName('a');
	var pi 		  = 3.14159265359;
	var radius  = 80;
	var angle   = 360 / buttons.length;
	var size 	  = 64;
	var padding	= 5;

	for (var i = 0, len = buttons.length; i < len; i++) {
		var b = buttons[i];
		b.style.borderRadius = size / 2 + 'px';
		b.setAttribute('data-x', radius * Math.cos((angle * i - 180) * -pi / 180) - size / 2);
		b.setAttribute('data-y', radius * Math.sin((angle * i - 180) * -pi / 180) - size / 2);
	}
	
	mask.style.borderRadius = (radius + size + padding * 2) + 'px';

	wrapper.onmouseover = function(event) { 
		mask.style.top    = -(radius + size / 2 + padding) + 'px';
		mask.style.left   = -(radius + size / 2 + padding) + 'px';
		mask.style.width  = ((radius + padding) * 2 + size) + 'px';
		mask.style.height = ((radius + padding) * 2 + size) + 'px';
		for (var i = 0, len = buttons.length; i < len; i++) {
			var b = buttons[i];
			b.style.top = b.getAttribute('data-x') + 'px';
			b.style.left = b.getAttribute('data-y') + 'px';
		}
	}; 
	wrapper.onmouseout = function(event) { 
		mask.style.top    = '0px';
		mask.style.left   = '0px';
		mask.style.width  = '0px';
		mask.style.height = '0px';
		for (var i = 0, len = buttons.length; i < len; i++) {
			var b = buttons[i];
			b.style.top = (-size / 2) + 'px';
			b.style.left = (-size / 2) + 'px';
		}
	}; 
	
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.