Html 如何在不移动文本的情况下展开按钮背景？

我有一个8像素高的按钮，我希望它在聚焦时变得更高，当我使用不同的高度或填充时，文本如何开始跳跃。如何保持文本静止并展开背景

html

---

最初将其调高，仅调整背景。您可以对此使用渐变色，并在悬停时更改背景大小

。按钮{
字体：继承；
线高：8px；
颜色：#000000；
背景：
线性梯度（#f0c52e，#f0c52e）中心/100%8px无重复；
字号：18px；
文本对齐：居中；
边界：无；
文本转换：大写；
线高：40px；
过渡：0.5s；
}
.按钮：悬停，
.按钮：焦点，
.按钮：激活{
背景大小：100%100%；
}

---

一些文本

将按钮向上移动

增加高度/2

效果很好，我很感激。

<button class="button">some text</button>

.button {
  font: inherit;

  line-height: 8px;
  color: #000000;
  background-color: #f0c52e;
  font-size: 18px;
  text-align: center;


  border:none;
  text-transform: uppercase;

}

.button:hover,
.button:focus,
.button:active
{
 line-height: 40px;
}