.f{
	width:100px;
	height:50px;
	background-color:rgb(21,130,205);
	position:relative;
}
.top{
	position:absolute;
	width:0;
	height:50px;
  top:0;
	z-index:2;
  overflow:hidden;
  transition:width linear .2s;
}
.in{
	position:absolute;
	width:100px;
	height:30px;
	line-height:30px;
	color:#fff;
	text-align:center;
	border-top:2px #fff solid;
  border-bottom:2px #fff solid;
  font-size:16px;
  top:8px;
  left:0;
}
.bottom{
  position:absolute;
	width:100px;
	height:30px;
	line-height:30px;
	color:#333;
	text-align:center;
	border-top:2px #333 solid;
  border-bottom:2px #333 solid;
  font-size:16px;
  top:8px;
  z-index:1;
}
.f:hover > .top{
	width:100px;
}