如何在HTML/CSS/JS中将两个按钮元素合并为单个复合按钮？

你可以通过调整布局、去掉按钮间隙、适配圆角的方式实现视觉合并效果，也可以直接用单个按钮包裹内容的更语义化方案，两种方式都不需要嵌套按钮（HTML规范本身也不允许按钮嵌套）。

问题修正点 #

1. 原代码容器的display: flexbox是错误写法，标准弹性盒属性为display: flex
2. 两个按钮都设置了margin: 5px，导致中间出现10px的间隙，需要取消相邻侧的外边距
3. 圆角要单独设置：左按钮仅保留左上、左下圆角，右按钮仅保留右上、右下圆角，中间无圆角即可实现无缝视觉效果

方案1：保留两个按钮，视觉合并 #

CSS代码 #

#downloadButtonDiv {
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 5px;
}

#downloadButton {
  background-color: #00B0F0;
  margin: 0;
  border: 1px solid #00B0F0;
  outline: none;
  border-radius: 5px 0 0 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 275px;
  cursor: pointer;
}

#downloadButtonIcon {
  background-color: #23a5d4;
  margin: 0;
  border: 1px solid #23a5d4;
  outline: none;
  border-radius: 0 5px 5px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

HTML代码和你原有代码保持一致即可，如果两个区域需要触发同一个操作，给两个按钮绑定同一个点击监听函数就行。

方案2：单个按钮更优方案（符合语义规范） #

直接把文字和图标放在同一个button里，本身就是一个可点击元素，不需要额外绑定多次事件：

HTML代码 #

<button type="button" id="downloadButton">
  <span class="btn-text">Download</span>
  <span class="btn-icon">
    <img src="#" width="50" alt="下载图标">
  </span>
</button>

CSS代码 #

#downloadButton {
  display: flex;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}
.btn-text {
  background-color: #00B0F0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  height: 75px;
  width: 275px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px 0 0 5px;
}
.btn-icon {
  background-color: #23a5d4;
  height: 75px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 5px 5px 0;
}

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