如何创建一个左边框附有圆圈的按钮？答案

【问题标题】：How to create a button that has a circle attached to its left border?如何创建一个左边框附有圆圈的按钮？
【发布时间】：2022-08-08 15:00:20
【问题描述】：

我正在尝试使用 html 和 css 创建一个按钮，该按钮是三个边的矩形，右侧有一个圆形部分，按钮边框围绕它。

这是我尝试创建的按钮的图像：

到目前为止我的代码：

#GetOTPBlock {
   display: flex;
   width: fit-content; 
   padding: 8px
}
.get-otp {
   font-size: 10px;
    padding: 4px;
    border: solid 2px #849dad;
    border-radius: 50%;
    font-weight: bold;
    color: #747f86;
    background-color: #f1f1f1;
    z-index: 333;
}

<div class=\"row\" id=\"GetOTPBlock\">
  <span class=\"get-otp\">OR</span>
  <div id=\"GetOTPBlockAction\">
    <a href=\"javascript:void(0);\" title=\"Get OTP\">Get OTP</a>
  </div>
</div>

你能过去你到目前为止的代码吗？
当然，我发布了代码。
我会做这样的事情：jsfiddle.net/dbcov2et 编辑：哦，我现在才看到你的代码。
如果圆圈只是一个视觉线索，那么使用 CSS 而不是 HTML 来创建它。您可以在元素之前或之后添加一个伪元素来执行此操作。

标签： html css

【解决方案1】：

您可以通过将get-otp 绝对放置在GetOTPBlock 周围来做到这一点。随意调整它以适应您的需要。

#GetOTPBlock{
  position:relative;
  margin:1rem;
}

#GetOTPBlock .get-otp{
  position:absolute;
  width:2rem;
  height:2rem;
  top:50%;
  transform:translateY(-50%);
  left:-1rem;
  background-color: white;
  color: #849dad;
  display:grid;
  place-items:center;
  border: 2px solid #849dad;
  border-radius:50%;
  pointer-events:none;
}

#GetOTPBlock a{
  color:white;
  text-decoration:none;
  padding:1rem 2rem;
  display:inline-block;
  background-color:#849dad;
  border-radius:5px;
}

<div class="row" id="GetOTPBlock">
  <span class="get-otp">OR</span>
  <div id="GetOTPBlockAction">
    <a href="javascript:void(0);" title="Get OTP">Get OTP</a>
  </div>
</div>

如果您可以更改您的 HTML 结构，您可以使用伪元素使其更简单：

#GetOTPBlockAction{
  position:relative;
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  display: inline-block;
  background-color: #849dad;
  border-radius: 5px;
  margin:1rem;
}

#GetOTPBlockAction::before {
  content:"Or";
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  transform: translateY(-50%);
  left: -1rem;
  background-color: white;
  color: #849dad;
  display: grid;
  place-items: center;
  border: 2px solid #849dad;
  border-radius: 50%;
  pointer-events: none;

}

&lt;a id="GetOTPBlockAction" href="javascript:void(0);" title="Get OTP"&gt;Get OTP&lt;/a&gt;

【讨论】：

【解决方案2】：

您可以制作一个圆圈，在圆圈上使用position: absolute，同时在按钮本身上使用position: relative 以相对于按钮定位圆圈。 top: 0 将其移至顶部，left: 0 将其一直移至左侧，因此请根据按钮的大小使用它们。

我建议只使用box-shadow 生成一个“重复”圆圈，该圆圈将低于原始圆圈，从而使其看起来像是有某种边框。

.main-btn {
  all: unset; /* Reset basic styling */
  border-radius: 20px;
  width: 100px;
  height: 40px;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  position: relative; /* Makes the circle position relatively to the button */
}

.circle {
  background-color: black;
  position: absolute;
  border-radius: 50%;
  color: white;
  width: 20px;
  height: 20px;
  top: 10px; /* Half of the circle's height */
  left: -5px;
  box-shadow: 0px 0px 0 1.5px red; /* "Duplicate" the circle with red color */
}

<button class="main-btn">
<div class="circle"></div>
</button>

【讨论】：

【解决方案3】：

你可以像这样在你的css中使用::before

.otp_button {
    padding: 10px 20px;
    background-color: rgb(71, 73, 111);
    color: #fff;
    border-style: none;
    border-radius: 5px;
    position: relative;

}
.otp_button::before {
    position: absolute;
    content: "or";
    text-transform: uppercase;
    left: -10px;
    background-color: rgb(177, 177, 177);
    font-size: 10px;
    border-radius: 100%;
    padding: 3px;
    border: 1px solid #000;
}

&lt;button class="otp_button"&gt;Get OTP&lt;/button&gt;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。