Javascript 动画按钮使相邻元素移动

我有两个按钮可以在悬停时设置动画。
每当我将鼠标悬停在每个按钮上时，该按钮就会推开相邻的元素。
如果您看下面的GIF，悬停按钮会推开另一个按钮，并放大其父按钮

HTML：我有两个按节嵌套的按钮

<section id="section2">
        <a href="" id="firstBtn" class="button btnPush commonBtn">홈</a>
        <a href="" id="secondBtn" class="button btnPush commonBtn">마이페이지</a>
</section>

CSS2：用于按钮

.commonBtn {
    font-family: 'GmarketSansBold';
    text-decoration: none;
    color: black;
    letter-spacing: 2px;
    font-size: 20px;
    display: none;
}

.commonBtn.button {
    position: absolute;
    width: 190px;
    padding: 0;
    margin: 10px 20px 10px 0;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    color: #4B4D52;
    border-radius: 5px;
    transition: all 0.2s;
}

.commonBtn.btnPush {
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(104, 109, 224, 0.5);
    border-radius: 50px;
}

.btnPush:hover {
    margin-top: 15px;
    margin-bottom: 5px;
    border: rgba(104, 109, 224, 0.5) 3px solid;
}

.commonBtn.btnPush:hover {
    box-shadow: 0px 0px 0px 0px #007144;
}

对于包含相同动画按钮的其他页面，也会发生相同的情况。

我在S/O上搜索并尝试了每个答案，但没有任何帮助。
是否有办法防止按钮不使用“位置：绝对；”，而推开其他元素

+)编辑

---

我稍微更改了过渡，但请尝试以下操作：

#第2节{
高度：100px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：1px实心#0000fc；
}
.commonBtn{
字体系列：“GmarketSansBold”；
文字装饰：无；
颜色：黑色；
字母间距：2px；
字体大小：20px；
}
.commonBtn.按钮{
宽度：190px；
填充：0；
保证金：10px 20px 10px 0；
字号：600；
文本对齐：居中；
线高：50px；
颜色：#4B4D52；
边界半径：5px；
显示：内联块；
过渡时间：0.3s；
过渡性质：变换；
-webkit点击突出显示颜色：透明；
变换：translateZ（0）；
长方体阴影：0 0 1px透明；
}
.commonBtn.btnPush{
背景：#FFFFFF；
盒影：0px 4px 20px rgba（1041092240.5）；
边界半径：50px；
}
.btnPush:悬停{
变换：比例（0.9）；
}
.commonBtn.btnPush:悬停{
变换：比例（0.9）；
}

您能提供包装该部分的html吗？将您的代码上载到JSFIDLE，由于我无法复制您的结果，仍然缺少一些内容-

.commonBtn {
    font-family: 'GmarketSansBold';
    text-decoration: none;
    color: black;
    letter-spacing: 2px;
    font-size: 20px;
    display: none;
}

.commonBtn.button {
    position: absolute;
    width: 190px;
    padding: 0;
    margin: 10px 20px 10px 0;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    color: #4B4D52;
    border-radius: 5px;
    transition: all 0.2s;
}

.commonBtn.btnPush {
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(104, 109, 224, 0.5);
    border-radius: 50px;
}

.btnPush:hover {
    margin-top: 15px;
    margin-bottom: 5px;
    border: rgba(104, 109, 224, 0.5) 3px solid;
}

.commonBtn.btnPush:hover {
    box-shadow: 0px 0px 0px 0px #007144;
}