顶部和底部：不同的过渡

Question

我有一个椭圆形，位置由绝对和＃34;顶部：-2px＆＃34;定义。如果我在悬停时为其添加边框，则结果是下图的下半部分，它仍然与中心对齐。但是，如果我通过＆＃34; bottom：?? px＆＃34;来定义位置，结果将成为上半部分，其中椭圆形被抬起。

当我用＆＃34;底部＆＃34;？

定义位置时，我可以实现下部结果吗？

椭圆形的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;
}

它的相对＆＃34;父：

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

Answer 2

已找到解决方案。

转换：翻译（50％，50％）;右：按底部定义时为50％

transform：translate（-50％， - 50％）;左：按顶部

定义时为50％