如何用 HTML 和 CSS 制作药丸形状的按钮？ [复制]答案

【问题标题】：How to make a pill shape button with HTML and CSS? [duplicate]如何用 HTML 和 CSS 制作药丸形状的按钮？ [复制]
【发布时间】：2022-04-10 15:47:21
【问题描述】：

我正在尝试设计一个看起来像 sn-p 中的按钮。该方法是采用最佳实践还是有更明显的方法？为了获得圆润的边缘，似乎需要很多开销。

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

【问题讨论】：

标签： html css

【解决方案1】：

您只需要设置一个大于按钮高度的border-radius。它给了你药丸的形状。像这样：

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

&lt;button&gt;Update&lt;/button&gt;

【讨论】：

【解决方案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>

【讨论】：