Html 如何设置按钮和按钮悬停以保持在线？

有一个小按钮CSS悬停，当我用鼠标光标悬停时，我看到悬停移动并更改按钮的内联顺序

我所拥有的：

我想要的：

我尝试使用

display:inline块但没有成功

请参阅下面的代码片段


.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润：4倍2倍；
过渡：0.3s；
光标：指针；
显示：内联块；
}
.btn:悬停{
填充：30px；
左侧填充：50px；
右边填充：50px；
背景色：#eb1269；
颜色：白色；
显示：内联块；
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我上方
不要更改任何内容，只需在刻度上书写即可

  .btn:hover {
      padding: 30px;
      padding-left: 50px;
      padding-right: 50px;
      background-color: #eb1269;
      color: white;
      display:inline-block;
      transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
    }

不要改变任何东西，只需写在刻度上

  .btn:hover {
      padding: 30px;
      padding-left: 50px;
      padding-right: 50px;
      background-color: #eb1269;
      color: white;
      display:inline-block;
      transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
    }


.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润率：4x15px；
过渡：0.3s；
光标：指针；
显示：内联块；
}
.btn:悬停{
转换：比例（1.3）；
背景色：#eb1269；
颜色：白色；
显示：内联块；
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我身上
.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润率：4x15px；
过渡：0.3s；
光标：指针；
显示：内联块；
}
.btn:悬停{
转换：比例（1.3）；
背景色：#eb1269；
颜色：白色；
显示：内联块；
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我上方
因为在您的示例中，文本不缩放，没有过渡，当鼠标悬停在按钮上时，相邻按钮重叠，您可以添加一个
框阴影
，播放
位置：相对
和
z索引


.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润率：4px6px；
光标：指针；
位置：相对位置；
z指数：1；
显示：内联块；
}
.btn:悬停{
盒影：0 20px#eb1269；
背景色：#eb1269；
z指数：2；
颜色：白色；
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我上方
因为在您的示例中，文本不缩放，没有过渡，当鼠标悬停在按钮上时，相邻按钮重叠，您可以添加一个
框阴影
，播放
位置：相对
和
z索引


.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润率：4px6px；
光标：指针；
位置：相对位置；
z指数：1；
显示：内联块；
}
.btn:悬停{
盒影：0 20px#eb1269；
背景色：#eb1269；
z指数：2；
颜色：白色；
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我上方
添加了带有缩放功能的变换属性。它正按照您的预期工作。变换：比例（1.2）


.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润：4倍2倍；
过渡：0.3s；
光标：指针；
显示：内联块；
}
.btn:悬停{
填充：30px；
左侧填充：50px；
右边填充：50px；
背景色：#eb1269；
颜色：白色；
显示：内联块；
**变换：比例（1.2）；**
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我上方
添加了带有缩放功能的变换属性。它正按照您的预期工作。变换：比例（1.2）


.btn{
背景色：#ddd；
边界：无；
颜色：黑色；
填充：16px 32px；
文本对齐：居中；
字体大小：16px；
利润：4倍2倍；
过渡：0.3s；
光标：指针；
显示：内联块；
}
.btn:悬停{
填充：30px；
左侧填充：50px；
右边填充：50px；
背景色：#eb1269；
颜色：白色；
显示：内联块；
**变换：比例（1.2）；**
}
淡入淡出按钮-“淡入淡出效果”
在我上空盘旋
在我上空盘旋
将鼠标悬停在我的上方
您只需添加
变换：比例（1.3）在
.btn:悬停
并删除填充

您还可以在
.btn
中设置适当的边距，如
边距：4px 8px
，使其看起来正确
您只需添加
变换：比例（1.3）在
.btn:悬停
并删除填充

您还可以在
.btn
中设置适当的边距，如
边距：4px 8px
，使其看起来正确
不要更改填充。更改按钮的高度和宽度或使用
transform:scale（1.1）
不要更改填充。更改按钮的高度和宽度或使用
transform:scale（1.1）