点击按钮触发收缩时影响其他元素的技术问题求助

问题出在通过修改padding实现收缩的方式——这会改变按钮的实际布局尺寸，导致容器内其他元素因布局重排产生位移。要让按钮单独收缩且不影响其他元素，改用transform: scale()即可，它仅改变元素的视觉大小，不会占用新的布局空间。

修改后的完整CSS代码：

.btn-container .btn{
    background: #fe2f6d;
    border: none ;
    padding: 20px 50px;
    margin: 0px 0 0 10px;
    color: #fff;
    font-weight: 400;
    font-size: x-large;
    border-radius: 7px;
    cursor:pointer;
    /* 可选：添加过渡让缩放效果更平滑 */
    transition: transform 0.1s ease;
}

.btn:active{
   /* 替换padding修改为缩放效果，数值可按需调整 */
   transform: scale(0.95);
}

额外说明： #

• scale(0.95)表示将按钮缩小至原尺寸的95%，你可以根据视觉需求调整数值（比如0.93、0.97）
• 若想实现非等比例的收缩，可分别设置X/Y轴缩放，例如transform: scale(0.96, 0.92)
• 过渡属性transition是可选的，作用是让缩放动画更自然，避免突兀的尺寸变化

内容的提问来源于stack exchange，提问作者Gazdag Balazs