悬停时的CSS链接按钮动画推送内容

Question

我在div:中有一个链接按钮

<div class="text-box">
<h1 class="main-title">
<span class="main-title--primary">outdoors</span>
<span class="main-title--secondary">is where life happens</span>
</h1>
<a href="#" class="main-cta-btn">discover</a>
</div>

以及它的css属性：

.main-cta-btn:link,
.main-cta-btn:visited {
display: inline-block;
background: white;
color: #28b485;
border: none;
border-radius: 50px;
padding: 10px 40px;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
animation: moveBottom 2s ease-in;
text-decoration: none;
}

当我尝试用以下代码添加悬停效果时：

.main-cta-btn:hover,
.main-cta-btn:active {
background: transparent;
color: white;
border: 2px solid white;
cursor: pointer;
}

该链接向上推文本框div中的其他div元素。我如何修复这种推送效果，我必须说，我在main-title上有绝对的定位，可以使其在页面中居中。

main-titlecss属性：

.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Answer 1

是悬停时添加的border: 2px solid white;通过增加按钮的宽度和高度导致了问题。诀窍是从一开始就有边界，但颜色是透明的，只需在悬停时更改颜色。

.main-cta-btn:link,
.main-cta-btn:visited {
display: inline-block;
background: white;
color: #28b485;
border: none;
border-radius: 50px;
padding: 10px 40px;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
animation: moveBottom 2s ease-in;
text-decoration: none;
/* Line I added */
border: 2px solid transparent;
}
.main-cta-btn:hover,
.main-cta-btn:active {
background: transparent;
color: red; 
/* Line I added */
border-color: red;
cursor: pointer;
}
.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

<div class="text-box">
<h1 class="main-title">
<span class="main-title--primary">outdoors</span>
<span class="main-title--secondary">is where life happens</span>
</h1>
<a href="#" class="main-cta-btn">discover</a>
</div>