<button class="button">
  <span data-title="OH YEAH!">ROLL ME</span>
</button>

<p class="respect">Strongly inspired by <a href="http://hakim.se" target="_blank">@Hakimel</a></p>

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

*{
	margin: 0;
	padding: 0;
	border: 0px none;
}

html{
  width: 100%;
  height: 100%;
  background-color: #333;  
  font: 900 2em/2em 'Montserrat';
}

.button{
	display: inline-block;
	position: absolute;
	overflow: hidden;
	left: 40%;
	top: 40%;
  width: 200px;
	perspective:400px;
	background-color: transparent;
  
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.3)));
  
}
.button span{
	display: block;
	position: relative;
	transition:0.3s ease-in-out all;
	transform-origin:50% 0;
  transform-style:preserve-3d;
	background-color: black;
	color: white;
  width: 100%;

}
.button span:after{
	display: block;
	content: attr(data-title);
	position: absolute;
	left: 0;
	top: 0;
	transition:0.3s ease-in-out all;
	transform-origin:50% 0;
	transform:translate3d(0px,105%,0px) rotateX(-90deg);
	background-color: white;
	color: black;
  width: 100%;
}

.button:hover span{
	transform:translate3d(0px,0px,-30px) rotateX(90deg);
}

.respect{
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-face: sans-serif;
  font-size: 0.5em;
  color:#444;
}

a{
  color:inherit;
  text-decoration: none;
}