CSS link button animation on hover pushes content [duplicate] - html

Question

This question already has an answer here:
CSS Divs Jumping when Border Added
(1 answer)
Closed 7 months ago.
I have a link button in a 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>
discover
</div>
And css property for it:
.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;
}
When I try add hover affect to it with this code:
.main-cta-btn:hover,
.main-cta-btn:active {
background: transparent;
color: white;
border: 2px solid white;
cursor: pointer;
}
The link push up other div elements in the text-box div. How I can fix this push effect and I must say I have absolute positioning on main-title for centering it in the page.
main-title css property:
.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Answer 1

It's this border: 2px solid white; added on hover who's causing the issue, by increasing the width and hight of the button. The trick is to have that border from the beginning but with a transparent colour, and just change the colour on hover.
.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>
discover
</div>