<div id="content" class="">
  <h1>CAN HAZ CONTENT</h1>
</div>

<div class="hold">  
  <div class="button">
    <div class="btn_top">
    <div class="inside">
    	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px"
   height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
<g id="back">
  <polygon opacity="0.4" points="390.366,412.265 329.664,320.193 45.787,164.399 131.318,393.906 313.927,481.664 276.466,538.916 
    390.781,623.396 505.076,538.916 467.633,481.664 650.225,393.906 735.773,164.399 451.862,320.193   "/>
</g>
<g id="middle">
  <polygon opacity="0.5" points="390.408,410.428 335.776,327.563 80.286,187.349 157.265,393.905 321.612,472.887 287.898,524.414 
    390.781,600.445 493.646,524.414 459.947,472.887 624.28,393.905 701.273,187.349 445.754,327.563  "/>
</g>
<g id="front">
  <polygon points="390.449,408.592 341.887,334.934 114.785,210.299 183.211,393.904 329.297,464.111 299.329,509.912 
    390.781,577.496 482.217,509.912 452.262,464.111 598.336,393.904 666.775,210.299 439.646,334.934   "/>
</g>
</svg>
    </div>
  	<div class="inside in2">
  		GO!
  	</div>
    </div>
  </div>
  
  
  
  <div class="circle"></div>
  
  </div>

html{
  overflow:hidden;
}
body{
  background:#eee;
}
.hold{
	width: 120px;
  margin: auto;
position: absolute;
top: 50%;
  margin-top:-60px;
left: 0;
bottom: 0;
right: 0;
  
}
.button {
background-color:#eee;
width:120px;
height:120px;
transition:all 0.2s;
-webkit-transition:all 0.2s; /* Safari */
float:left;
border:0;
position:relative;
text-align: center;
line-height: 120px;
  border-radius:70px;
  outline:none;
  margin:0 auto;
  overflow:hidden;
}
/*.button:hover{
	z-index:2;
	margin-top:-8px;
	background-color:#ffffff;
	box-shadow:		0 1px 0 hsl(0,0%,75%),
					0 2px 0 hsl(0,0%,74%),
					0 3px 0 hsl(0,0%,73%),
					0 4px 0 hsl(0,0%,72%),
					0 5px 0 hsl(0,0%,71%),
					0 6px 0 hsl(0,0%,70%),
					0 7px 0 hsl(0,0%,69%),
					0 8px 0 hsl(0,0%,68%),
					/* LIGHT SHADOWS */
					0 0 5px rgba(255,255,255,.05),
					0 -1px 3px rgba(255,255,255,.2),
					0 -3px 5px rgba(255,255,255,.2),
					0 -5px 10px rgba(255,255,255,.2),
					0 -10px 10px rgba(255,255,255,.2),
					0 -20px 20px rgba(255,255,255,.3),
					/* DARK SHADOWS */
					0 0 5px rgba(0,0,0,.05),
					0 1px 3px rgba(0,0,0,.2),
					0 3px 5px rgba(0,0,0,.2),
					0 5px 10px rgba(0,0,0,.2),
					0 10px 10px rgba(0,0,0,.2),
					0 20px 20px rgba(0,0,0,.3);
}
.button:active{
	margin-top:0px;
	background-color:#eeeeee;
	transition:all 0.1s;
	-webkit-transition:all 0.1s; /* Safari */
	box-shadow:		0 0px 0 hsl(76,64%,30%),
					0 0px 0 hsl(76,64%,28%),
					0 0px 0 hsl(76,64%,32%),
					0 0px 0 hsl(76,64%,30%),
					0 0px 0 hsl(76,64%,28%),
					0 0px 0 hsl(76,64%,25%),
					0 0px 0 hsl(76,64%,22%),
					0 0px 0 hsl(76,64%,20%),
					0 0 0px rgba(0,0,0,.05),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.3);
}*/


.inside{
  width: 120px;
  height: 120px;
  
  position:relative;

  float:left;
}
.in2{
	font-family: 'Lato', sans-serif;
  font-weight:700;
  color:#fff;
  line-height:120px;
  font-size:50px;
  background-color: #2ecc71;
}
.in2:hover{
  width: 100%;
  height: 100%;
}
svg{
	width: 100%;
  height: 100%;
  display:block;

  
}
.btn_top{
	height: 240px;
  width: 120px;
    transition:all 0.3s;
	-webkit-transition:all 0.3s; /* Safari */
}
.btn_top:hover{
  
  margin-top:-120px;
}
.circle{
  width: 110px;
  height: 110px;
  background-color:#2ecc71;
  border-radius:80px;
  position:absolute;
  top:5px;
  left:5px;
  z-index:-1;
    transition:all 0.5s;
	-webkit-transition:all 0.5s; /* Safari */
}
.circle.expand{
  width: 3000px;
  height: 3000px;
  z-index: 2;
  border-radius:3000px;
  top:-1440px;
  left:-1440px;
    background-color:#eee;
}

#content{
  width: 1200px;
  height: 800px;
  background-color:#fff;
  margin:0 auto;
  position:relative;
  z-index:999;
  top:-900px;
  opacity:0;
        transition:all 0.7s;
	-webkit-transition:all 0.7s; /* Safari */
}
#content.expand{
  top:10px;
  opacity:1;
}

$('document').ready(function(){
  
  $('.in2').click(function(){
    console.log($(window).width())
    $('.circle').addClass('expand');
    $('#content').addClass('expand');
    location.replace("http://stackoverflow.com");
	})
})