<style>

:any-link {
	display: inline-block;
	position: relative;
	text-align: center;
	color: hsl(200, 100%, 50%);
	-webkit-transform-origin: center top;
	        transform-origin: center top;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform, color, background-color;
	        transition-property:         transform, color, background-color;
	-webkit-transition-duration: 300ms;
	        transition-duration: 300ms;
}

:any-link:hover {
	color: white;
	-webkit-transform: rotateX(90deg) translateY(-50%);
	        transform: rotateX(90deg) translateY(-50%);
}

:any-link::before {
	content: attr(title);
}

:any-link::after {
	position: absolute;
	top: 100%;
	right: -2px;
	left: -2px;
	height: 100%;
	content: attr(title);
	color: white;
	text-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.15),
	             0 1px 5px hsla(0, 0%, 0%, 0.1);
	background-color: hsl(200, 100%, 50%);
	-webkit-transform: rotateX(-90deg);
	        transform: rotateX(-90deg);
	-webkit-transform-origin: center top;
	        transform-origin: center top;
	-webkit-transition: background-color 300ms;
	        transition: background-color 300ms;
}

</style>

<a href="#" title="Hello World!"></a>