如何使用HTML和CSS实现右侧附着圆形区域的一体化边框按钮

需求说明 #

使用HTML+CSS实现自定义按钮：按钮主体为矩形结构，右侧附着圆形区域，外边框可完整环绕矩形+圆形组成的整体轮廓，目标效果如下：

初始编写代码 #

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;
}

HTML部分 #

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

修正后实现方案 #

核心实现逻辑 #

• 父容器承载整体左侧矩形的边框与圆角，右侧圆形单独设置正圆边框
• 通过负边距让圆形与矩形区域衔接，抵消边框宽度差，避免衔接处出现断缝或双边框
• 圆形区域固定宽高，使用flex布局居中内部文字，避免padding不均导致圆形变形
• 所有元素垂直居中对齐，保证视觉统一

完整可用代码 #

#GetOTPBlock {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 2px solid #849dad;
  border-radius: 6px;
  background-color: #f1f1f1;
}

#GetOTPBlockAction {
  padding: 8px 20px;
}

#GetOTPBlockAction a {
  color: #747f86;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.get-otp {
  box-sizing: border-box;
  font-size: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #849dad;
  border-radius: 50%;
  font-weight: bold;
  color: #747f86;
  background-color: #f1f1f1;
  margin: -2px -2px -2px 8px;
}

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

关键调整点 #

• 将原代码中圆形元素从左侧移到右侧，匹配设计结构
• 移除圆形单独的z-index设置，通过负margin实现边框无缝衔接
• 父容器取消多余内边距，所有间距拆分到对应子元素上，方便精准控制排版
• 圆形设置box-sizing: border-box，保证边框宽度计算在固定宽高内，不会出现圆尺寸溢出

内容的提问来源于stack exchange，提问作者Vishal