如何用HTML和CSS制作一个药丸形状的按钮？ [重复]

Question

我正在尝试设计一个看起来像代码片段中的按钮。 该方法是采用最佳实践还是有更明显的方法来做到这一点？ 似乎只是为了获得圆形边缘需要很多开销。

#p1,
#p2 {
  height: 25px;
  width: 25px;
  border-radius: 50% 0 0 50%;
  background-color: blue;
}

#p2 {
  border-radius: 0 50% 50% 0;
}

button {
  height: 25px;
  width: 75px;
  background-color: blue;
  border: none;
  color: white;
}

#container {
  display: flex;
  align-items: center;
}

<div id='container'>
  <p id='p1'></p>
  <button>Update</button>
  <p id='p2'></p>
</div>

Answer 1

您只需将

border-radius

设置为大于按钮的高度即可。它给你药丸的形状。就像这样：

button{
   height:25px;
   width:75px;
   border-radius: 30px;
   background-color:blue;
   border:none;
   color:white;
}

<button>Update</button>

Answer 2

根本不需要

元素，直接给按钮添加 border-radius 即可

button{
   height:25px;
   width:110px;
   background-color:blue;
   border:none;
   color:white;
   border-radius: 50px;
}

#container{
   display:flex;
   align-items:center;
}

<div id='container'>
   <button>Update</button>
</div>