如何设置两个按钮粘合在一起？

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>

#button1, #button2 {
  display: inline-block; /* 将按钮设置为行内块元素 */
  padding: 10px 20px; /* 设置按钮的内边距 */
  background-color: #ccc; /* 设置按钮的背景颜色 */
  border: none; /* 去除按钮的边框 */
  color: #fff; /* 设置按钮的文字颜色 */
}

#button1 {
  border-top-right-radius: 0; /* 去除按钮1的右上角圆角 */
  border-bottom-right-radius: 0; /* 去除按钮1的右下角圆角 */
}

#button2 {
  border-top-left-radius: 0; /* 去除按钮2的左上角圆角 */
  border-bottom-left-radius: 0; /* 去除按钮2的左下角圆角 */
}

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

button1.addEventListener("click", function() {
  button2.style.marginLeft = "-4px"; /* 设置按钮2的左外边距为负值，使其与按钮1粘合在一起 */
});

button2.addEventListener("click", function() {
  button2.style.marginLeft = "0"; /* 恢复按钮2的左外边距为0，使其与按钮1分开 */
});