Html 在线高度更改时，当单击一个按钮时，相邻按钮和按钮下方的文本向下移动

我有一个

.button

类，它在激活状态下添加了一个

插入框阴影

，并将

行高度增加了2，以产生按下按钮的效果。但它旁边的按钮和下面的文字也会向下移动，这是我不想看到的。你们能告诉我怎样才能在并没有其他任何东西移动的情况下达到这个效果吗

注意：我只希望在按下按钮时按钮内的文本向下移动2倍，因此我选择使用
行高


。按钮{
显示：内联块；
高度：36px；
填充：0 18px；
背景：青色；
颜色：黑色；
边界：无；
线高：36px；
利润率：6px；
}
.按钮：活动，.按钮：聚焦{
大纲：无；
}
.按钮：激活{
长方体阴影：0 2px 0 0蓝色插图；
线高：38px；
}
你好！
再见！
你好!我建议将行高设为38px，并在按钮未激活时添加透明框阴影（高度相同）。这样，在活动状态下，将不会移动任何内容。
您可以通过转换尝试此操作：


。按钮{
显示：内联块；
高度：36px；
填充：0 18px；
背景：青色；
颜色：黑色；
边界：无；
线高：36px；
利润率：6px；
}
.按钮：活动，.按钮：聚焦{
大纲：无；
}
.按钮：激活{
长方体阴影：0 2px 0 0蓝色插图；
变换：translateY（2px）；
}
你好！
再见！
你好!只需添加
垂直对齐：顶部到您的
按钮
样式

垂直对齐
属性的默认值为
基线
。当一个按钮对焦时，由于其
行高度的变化，
.button
元素的对齐会受到干扰，因此按下下面的内容


。按钮{
显示：内联块；
垂直对齐：顶部；
高度：36px；
填充：0 18px；
背景：青色；
颜色：黑色；
边界：无；
线高：36px；
利润率：6px；
}
.按钮：活动，.按钮：聚焦{
大纲：无；
}
.按钮：激活{
长方体阴影：0 2px 0 0蓝色插图；
线高：38px；
}
你好！
再见！
你好!请避免使用对我没有帮助的线条高度。那么，你能提出一个替代方法来达到这个效果吗？我只是想让文本移动一下。我不想把整个按钮都扣上move@takeradi我添加了解释）