Html 悬停时保持CSS按钮大小

我试图制作一个按钮，悬停时，会播放动画。颜色从底部向上滚动，单词从“Click Me”更改为“Go”。我试过用按钮，没有跨距，等等。我认为问题在于悬停的

位置：绝对

当前，当您悬停时，按钮会收缩并出现抖动。我希望按钮始终保持相同的大小


正文{
宽度：100vw；
高度：100vh；
背景色：#5d5d；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
a{
背景色：红色；
边界：无；
边界半径：10px；
颜色：白色；
填充：16px 64px；
字号：18px；
光标：指针；
文字装饰：无；
}
.hvr扫掠至顶部{
显示：内联块；
垂直对齐：中间对齐；
变换：透视图（1px）translateZ（0）；
长方体阴影：0 1px rgba（0,0,0,0）；
位置：相对位置；
过渡性质：颜色；
过渡时间：0.3s；
}
.hvr扫掠至顶部：之前{
边界半径：10px；
内容：“走”；
文本对齐：居中；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景：绿色；
变换：scaleY（0）；
变换原点：50%100%；
过渡性质：变换；
过渡时间：0.3s；
过渡定时功能：缓解；
}
.hvr扫描到顶部：悬停：之前，.hvr扫描到顶部：焦点：之前，.hvr扫描到顶部：活动：之前{
变换：scaleY（1）；
}
a:悬停跨度{
显示：无；
}
删除
a:悬停span
此css并在
:before
中添加
z-index:1


正文{
宽度：100vw；
高度：100vh；
背景色：#5d5d；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
a{
背景色：红色；
边界：无；
边界半径：10px；
颜色：白色；
填充：16px 64px；
字号：18px；
光标：指针；
文字装饰：无；
}
.hvr扫掠至顶部{
显示：内联块；
垂直对齐：中间对齐；
变换：透视图（1px）translateZ（0）；
长方体阴影：0 1px rgba（0,0,0,0）；
位置：相对位置；
过渡性质：颜色；
过渡时间：0.3s；
}
.hvr扫掠至顶部：之前{
边界半径：10px；
内容：“走”；
文本对齐：居中；
位置：绝对位置；
z指数：1；
排名：0；
左：0；
右：0；
底部：0；
背景：绿色；
线高：53px；
变换：scaleY（0）；
变换原点：50%100%；
过渡性质：变换；
过渡时间：0.3s；
过渡定时功能：缓解；
}
.hvr扫描到顶部：悬停：之前，.hvr扫描到顶部：焦点：之前，.hvr扫描到顶部：活动：之前{
变换：scaleY（1）；
}
/*a:悬停跨度{
显示：无；
}*/
最简单的更改可能是这一行的差异：

.hvr-sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition-property: color;
  transition-duration: 0.3s;
  height: 3em;  width: 5em;   /* modify to needs */
}