HTML/CSS 如何制作这样的按钮？ [复制]答案

【问题标题】：HTML/CSS How to make such a button? [duplicate]HTML/CSS 如何制作这样的按钮？ [复制]
【发布时间】：2021-08-22 05:52:40
【问题描述】：

我想给一个按钮设置样式，让它看起来像这样：

我尝试了下面的代码，但看起来完全不同。

button {
   width: 500px;
   height: 30px;
   border-radius: 50%;
   background-color: #f0f0f0;
}

我对边界半径感兴趣。

【问题讨论】：

尝试调整边框半径，比如说从 50% 到 8px
根据他的要求，我建议设置为15px，因为它将是固定高度30px的50%
例如设置border-radius为15px。应该有帮助。

标签： html css button

【解决方案1】：

button {
   width: 500px;
   height: 30px;
   border-radius: 15px;
   border: none;
   background-color: #f0f0f0;
}

&lt;button&gt;text here&lt;/button&gt;

【讨论】：

【解决方案2】：

将边框半径设置为 px 而不是 %。一半的高度（30px）将使它变得漂亮和圆润。任何少一点都会使它不那么圆润。

button {
  width: 500px;
  height: 30px;
  border-radius: 15px;
  background-color: #f0f0f0;      
}

【讨论】：

【解决方案3】：

你的边界半径错误。用你的border-radius : 50%，会尽量让按钮变成椭圆的那种形状。所以使用 px 单位来制作圆角。按钮上还有默认边框，因此您必须将边框设置为无。下面的 css 会做同样的事情：

button {
  width: 500px;
  height: 30px;
  border-radius: 10px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
  font-family: monospace;
}

【讨论】：

【解决方案4】：

我建议你使用这样的东西：

button {
   width: 500px;
   height: 30px;
   border-radius: 15px; /* here we just change the radius to a fixed one, according to fixed height */
   border: none; /* here we remove black border */
   background-color: #f0f0f0;
}

对于文本，您可以使用text formating。

【讨论】：