如何为按钮布局添加间距 实现同行排列且保留原有动画效果

你可以直接在原有button样式规则中新增margin属性实现按钮间距需求，修改后不会破坏原有动画效果，也不会影响按钮同行展示的布局。

修改后的完整CSS代码 #

button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: #9DDAC6;
  color: #000;
  transition: all 200ms ease-in-out;
  /* 新增：控制按钮左右间距，可自行调整数值修改间距大小 */
  margin: 0 8px;
}
/* 新增：统一按钮内链接的样式，避免出现默认下划线、文字颜色异常 */
button a {
  color: inherit;
  text-decoration: none;
}
button:hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
button:active {
  transform: scale(1);
}

说明 #

• 新增的margin: 0 8px表示给按钮上下设置0边距，左右各设置8px边距，你可以根据需求调整8px的数值，数值越大按钮间距越大。
• 新增的button a规则仅用于优化按钮内嵌链接的显示效果，不需要可以删除，不影响间距功能。
• 原有HTML代码无需修改，所有按钮仍会保持居中同行展示。

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