当我悬停按钮时，如何阻止标题和按钮向上移动

Question

这是问题的视频https://files.fm/u/pvuv6shbx

我仍然希望它的悬停动画向右滑动，但我不希望按钮和标题在我悬停时向上移动。

按钮代码

button{
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #0da7ce;
background: transparent;
color: white;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px #0da7ce;
}

按钮动画代码

span{
background: #0da7ce;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span{
width: 100%;
}
button:hover{
border: none;
}

Answer 1

只需将边框与背景的颜色相同即可

button:hover{
border-color: #0da7ce;
}

Answer 2

只需简单地更改边框颜色

button:hover{
border-color: transparent;
}

Answer 3

在CSS中更改此项：

button:hover{
border: none;
}

至

button:hover{
border: 2px solid transparent;
}