Top and bottom: different transition - html

Question

I have an oval, position defined by absolute and "top: -2px". If I add a border to it when hovered, the result is the lower part of the following image, which is still aligned to the center. However if I define the position by "bottom: ??px", the result becomes the upper part, in which the oval is raised up.
Can I achieve the lower part result when I define the position by "bottom"?
CSS for oval:
#oval
{
position: absolute;
top: -2px;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px 15px;
cursor: pointer;
border: none;
border-radius: 20px;
text-align: center;
color: #fff;
font-size: 15;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#oval:hover
{
border: solid //a new color ;
background-color: //a new color ;
color: #000;
}
Its "relative" parent:
.parent
{
position: relative;
width: 600px;
padding: 30px 10px 10px 10px;
border-style: solid;
border-radius: 20px;
margin: auto;
text-align: center;
font-family: "Arial";
font-size: 14;
}
HTML
<div class="parent">
<input type="button" id="oval" value="<?php echo $value; ?>"
onclick='window.open("<?php echo $link; ?>")'>
....
JSF demo

Answer 1

When changing border colours on hover, it's often a good idea to start off with a transparent border and modify that on hover, rather than adding and removing a border each time. This will save you a lot of headaches such as jumping positions, changing box etc.
#oval
{
position: absolute;
top: -2px;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px 15px;
cursor: pointer;
/* OVER HERE */
border: 2px solid transparent;
border-radius: 20px;
text-align: center;
color: #fff;
font-size: 15;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#oval:hover
{
border-color: black;
background-color: red;
color: black ;
}

Answer 2

Found the solution already.
transform: translate(50%, 50%); right:50% when defining by bottom
transform: translate(-50%, -50%); left:50% when defining by top