Slide the mouse over the box to change the text in the box

[Function description]: When the mouse moves over the box, the original content in the box is changed.
[Implementation idea]: Put a span next to the displayed text, and hide it at the beginning. There is text.
[Note]: You need to add relative positioning to the parent box, and absolute positioning to the child elements, otherwise the box will change its original position when hovering.
[Code demo]:

<div class="login" >
	<el-button class="loginbtn" >已退出<span>登录</span></el-button>
	<el-button class="loginbtn" >已登录<span>退出</span></el-button>
</div>

<style>
.login {
    
    
	position: relative;
}
.loginbtn {
    
    
	position: absolute;
	background: #f4f4f5;
	color: #606266;
	cursor: pointer;
	width: 270px;
	height: 30px;
}
.loginbtn:hover {
    
    
	background: #42b983 !important;
	color: #ffffff;
	cursor: pointer;
	font-size: 0;
}
.loginbtn span {
    
    
	font-size: 0;
}
.loginbtn:hover span {
    
    
	display: block;
	font-size: 12px;
	color: #ffffff;
}
</style>