* {
	margin:0;
	padding:0;
}
body {
	padding:20px;
}
div {
	position:relative;
	font-size:24px;
	text-align:center;
	width:150px;
	height:40px; 
	margin:10px;
	line-height:40px;
	cursor:pointer;
}
div:before {
	content:"";
	position:absolute;
	z-index:-1;
	left:0;
	bottom:0;
	width:150px;
	height:2px;
	background:deeppink;
	transform:scaleX(0);
	transition:transform .5s;
}
div:hover:before {
	transform:scaleX(1);
}
.two:before {
	height:40px;
	transform:scale3d(0,1,1);
	transform-origin:0% 50%;
}
.two:hover {
	color:#fff;
	&:before {
	transform:scale3d(1,1,1);
	transform-origin:100% 50%;
	transition-timing-function:ease-in;
}
;}.three:before {
	height:40px;
	transform:scale3d(0,0,1);
	transform-origin:100% 100%;
}
.three:hover {
	color:#fff;
	&:before {
	transform:scale3d(1,1,1);
	transform-origin:0% 0%;
	transition-timing-function:ease-in;
}
}.four:before {
	height:40px;
	transform:scale3d(0,1,1);
	transform-origin:50% 100%;
}
.four:hover {
	color:#fff;
	&:before {
	transform:scale3d(1,1,1);
	transform-origin:50% 0%;
	transition-timing-function:ease-in;
}
}.five:before {
	height:40px;
	transform:scale3d(1,0,0);
	transform-origin:50% 50%;
}
.five:hover {
	color:#fff;
	&:before {
	transform:scale3d(1,0,1);
	transform-origin:100% 0%;
	transition-timing-function:ease-in;
}
}p {
	position:relative;
	width:200px;
	height:60px;
	line-height:60px;
	font-size:32px;
	cursor:pointer;
	color:#333;
	text-align:center;
	transition:transform .5s;
	margin:10px;
}