<div id="big">
	Material Design Button Test
</div>
<div class="smallgap">
<button id="window">+</button>
<div id="modal">
<button id="close">X</button>
It works!<br />
	<small>Made with <span class="love"><span class="heart"></span></span> by Xava</small>
</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700);
*{
	box-sizing:border-box;
	font-family: 'Josefin Sans', sans-serif;
}
body{
	background:#ddd;
	overflow:hidden;
	font-family: 'Josefin Sans', sans-serif;
}
#big{
	background:#26A65B;
	height:300px;
	position:absolute;
	z-index:-1;
	top:0;
	width:100%;
	text-align:center;
	padding-top:100px;
	font-size:42px;
	color:#fff;
}
button{
	border:none;
	border-radius:50em;
	padding:10px 20px;
	height:40px;
}

#window{
width: 50px;
  height: 50px;
  background: #222;
  color: #fff;
  position: absolute;
  float: right;
  margin: 250px 500px;
  -webkit-transition: 0s all;
  transition: 0s all;
	padding:10px;
    font: 30px Helvetica, sans-serif;
	line-height:1px;
}

button:focus{outline:none;}

@keyframes bigandfit {
    0%   {width:50px;height:50px;}
	5%   {width:70px;}
	12%   {width:100px;}
	20%   {width:70px;}
  	25%  {width:50px;height:50px;	margin:255px 0 0 calc(50% - 20px);border-radius:100%;}
   100% {width:200%;height:200%;margin:calc(275px - 100%) 0 0 calc(50% - 100%);}
}


.ball{
	 animation-name: bigandfit;
    animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}

#modal{
	width:100%;
	position:absolute;
	left:0;
	top:0;
	height:100%;
	background:#222;
	color:#eee;
	font-size:100px;
	text-align:center;
	padding:100px;
	z-index:100;
	display:none;
}

.smallgap{
	width:550px;
	height:550px;
	margin:25px auto;
	position:relative;
	overflow:hidden;
}

#close{
	width:0px;
	height:0px;
	padding:0;
	background:rgba(255,255,255,0.8);
	position:absolute;
	right:20px;
	top:20px;
	transition:0.4s all;
    font: 12px Helvetica, sans-serif;
}

small{
	font-size:14px;
}

.love{
	color:red;
	position:relative;
}

.heart {
position: relative;
font-size: 8px;
width:0px;
height:0px;
	margin:0 9px;
	display:inline-block;
}
.heart::before, .heart::after {
position: absolute;
content: "";
margin-top:-11px;
width: 1em;
height: 1.6em;
background: red;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

.heart::after {
left: -0.96em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

$( "#window" ).click(function() {
var sa = $(this).text();
$(this).text("");
$(this).addClass("ball");
setTimeout(function(){
	$("#modal").fadeIn();
	$("#close").css("width", "30px");
	$("#close").css("height", "30px");
		setTimeout(function(){
		$("#window").removeClass("ball");
		$("#window").text(sa);
		}, 500);
}, 800);
});

$( "#close" ).click(function() {
$("#modal").fadeOut();
$("#close").css("width", "0px");
$("#close").css("height", "0px");
});