Button border on hover moves the text inside - html

Question

I have created a border-like keyframe CSS style. When I hover the button the border-like animation should start from top-right to top-left then to bottom-left then after to bottom-right and finally to top-right again. When I hover the button the previous sequence should happen and is already created. However; when hovered, the text inside the button moves, which makes the button looks weird.
I looked at the answer to this question, but it's not applicable in my case as I am not using border styling on hover. Instead, I am changing the background color, width, and height of the three spans, not borders.
How can I prevent this shake with the method the animation is created?
CodePen: https://codepen.io/Tes3awy/pen/ZZRpBW
HTML
<div class="wrapper">
<a class="custom-btn" href="https://mince.34way.com/about/" title="About">
About Us
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
</a>
</div>
CSS
body {
position: relative;
height: 100vh;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-btn {
position: relative;
width: 183px;
height: 55px;
line-height: 55px;
display: inline-block;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
border: 2px solid #77a942;
color: #77a942;
text-decoration: none;
}
span[class^="border-"] {
opacity: 0;
}
.border-top {
position: absolute;
top: -2px;
right: 0;
width: 100%;
height: 3px;
background-color: transparent;
}
.border-left {
position: absolute;
top: 0;
left: -2px;
width: 3px;
height: 100%;
background-color: transparent;
}
.border-bottom {
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 3px;
background-color: transparent;
}
.border-right {
position: absolute;
bottom: 0;
right: -2px;
width: 3px;
height: 100%;
background-color: transparent;
}
.custom-btn:hover .border-top {
animation: animateTop .2s 1 alternate ease forwards;
}
.custom-btn:hover .border-left {
animation: animateLeft .2s 1 alternate ease forwards;
animation-delay: .2s;
}
.custom-btn:hover .border-bottom {
animation: animateBottom .2s 1 alternate ease forwards;
animation-delay: .4s;
}
.custom-btn:hover .border-right {
animation: animateRight .2s 1 alternate ease forwards;
animation-delay: .6s;
}
#keyframes animateTop {
0% {
width: 0;
height: 0;
opacity: 0;
background-color: #77a942;
}
50% {
width: 50%;
height: 3px;
opacity: 1;
background-color: #77a942;
}
100% {
width: 100%;
height: 3px;
opacity: 1;
background-color: #77a942;
}
}
#keyframes animateLeft {
0% {
width: 0;
height: 0;
opacity: 0;
background-color: #77a942;
}
50% {
width: 3px;
height: 50%;
opacity: 1;
background-color: #77a942;
}
100% {
width: 3px;
height: 100%;
opacity: 1;
background-color: #77a942;
}
}
#keyframes animateBottom {
0% {
width: 0;
height: 0;
opacity: 0;
background-color:#77a942;
}
50% {
width: 50%;
height: 3px;
opacity: 1;
background-color:#77a942;
}
100% {
width: 100%;
height: 3px;
opacity: 1;
background-color:#77a942;
}
}
#keyframes animateRight {
0% {
width: 0;
height: 0;
opacity: 0;
background-color: #77a942;
}
50% {
width: 3px;
height: 50%;
opacity: 1;
background-color: #77a942;
}
100% {
width: 3px;
height: 100%;
opacity: 1;
background-color: #77a942;
}
}

Answer 1

When you translate things by 50%, they may end up in-between pixels. When you use a transition, CSS tends to change its mind on what pixel it rounds to. Try to make sure that the button you're centering text in has height/width that CSS has a definite position it can settle on when you divide it by half.