link-effects

amiriqbalmcs.css

a.cl-effect-2{
	-webkit-perspective:1000px;
	-moz-perspective:1000px;
	perspective:1000px;
	color:#fff;
}

a.cl-effect-2 span{
	position:relative;
	display:inline-block;padding:0 14px;
	background:#2195de;
	-webkit-transition:-webkit-transform .3s;
	-moz-transition:-moz-transform .3s;
	transition:transform .3s;
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	transform-origin:50% 0;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

a.cl-effect-2 span::before {
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:100%;
	background:#0965a0;
	content:attr(data-hover);
	-webkit-transition:background .3s;
	-moz-transition:background .3s;
	transition:background .3s;
	-webkit-transform:rotateX(-90deg);
	-moz-transform:rotateX(-90deg);
	transform:rotateX(-90deg);
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	transform-origin:50% 0;
	text-align:center;
	color:#fff;
}

a.cl-effect-2:focus span,a.cl-effect-2:hover span {
	-webkit-transform:rotateX(90deg) translateY(-22px);
	-moz-transform:rotateX(90deg) translateY(-22px);
	transform:rotateX(90deg) translateY(-22px);
}