如何创建改变背景颜色并看起来圆润的悬停效果

Question

我正在尝试在文本 (p) HTML 元素上创建悬停效果。我希望文本元素的背景颜色发生变化，并且看起来呈椭圆形。请参阅下图，了解我想要实现的目标。我不知道如何获得椭圆形 - 当我添加边框半径时，它会使角变圆，但不会使左侧和右侧变圆。

想要的效果：

这是我得到的最接近的：

border: 1px solid transparent;
border-radius: 10px;

我知道我需要在左侧添加填充...但只是想先弄清楚椭圆形。

提前非常感谢您的帮助。

Answer 1

我发现始终有效的方法是设置高于按钮总高度的边框半径，例如：100px甚至200px以确保安全。

https://codepen.io/Luke-Johns-lukeybytes/pen/WNmGXpW

.rounded {
  background: black;
  border-radius: 100px;
  color: white;
  padding: 2rem;
}