html - 顶部和底部 : different transition

Question

我有一个椭圆形，位置由绝对值和“顶部:-2px”定义。如果我在悬停时为其添加边框，结果是下图的下半部分，它仍然与中心对齐。但是，如果我通过“bottom: ??px”定义位置，结果将变为上半部分，其中椭圆向上凸起。

用“bottom”定义位置能达到下半部分的效果吗？

椭圆形的 CSS:

#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;
}

它的“相对”父级:

.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

在悬停时更改边框颜色时，最好从透明边框开始并在悬停时修改它，而不是每次都添加和删除边框。这将为您省去很多令人头疼的问题，例如跳位、换箱等。

#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 ;
}