CSS transition for border is pushing the button down - html

Question

So I have a border transition on hover and on active for a circular button so the border increases in size. However, the border expands downwards, pushing the button downward. Is there any way to make it so the border expands evenly outward? I've searched this site and others for solutions, and while there are similar questions, they don't answer this specifically.
Thanks!
HTML:
<center><a class="btn" href="#"></a></center
CSS:
.btn {
vertical-align: top;
transform: translateY(20px);
background-color: black;
display: inline-block;
height: 300px;
width: 300px;
border-radius: 50%;
border: 0px solid red;
transition: border-width 0.1s ease-in;
margin: 0.5em;
}
.btn:hover {
border: 20px solid red;
}
.btn:focus {
border: 75px solid red;
}

Answer 1

Instead of using border, you can generate a border effect by placing a pseudoelement behind the button, and transforming its scale on hover and focus as needed.
*also note that <center> is deprecated in HTML5. You can center content with CSS instead.
.btn {
display: block;
margin: 5rem auto;
position: relative;
background-color: black;
height: 300px;
width: 300px;
border-radius: 50%;
transition: border-width 0.1s ease-in;
}
.btn:before {
content: '';
display: block;
position: absolute;
background: red;
border-radius: 50%;
width: 300px;
height: 300px;
z-index: -1;
transition: all .1s ease;
}
.btn:hover:before {
transform: scale(1.1);
}
.btn:focus:before {
transform: scale(1.25);
}
<a class="btn" href="#"></a>