--如何向按钮添加填充？--动画可以工作，但在它们之间添加一些空格似乎是一个问题--我仍然希望所有按钮都在同一行上，但只是稍微间隔一点--在这方面还是有点新的，所以我很感谢帮助--

---

顺晟科技：

这几行代码似乎正是我要找的:

我想这就是您试图实现的目标:

我已经对属性进行了分组，以便您可以从其他属性中找出哪些属性控制布局。

注意，若要避免鼠标悬停时按钮移动，必须避免修改指定属性的大小（例如：字体大小或粗细、边框粗细等）。

因为转换不会改变页面布局，所以必须确保按钮的包装有足够的填充，以防止它们被裁剪。按钮中指定的页边距也是如此。

关于mdn的说明:

概括地说，em单位表示“我的父元素的字体大小” 排版案。类中的元素 ems从他们的父母那里得到他们的尺寸。所以每一个连续的级别 嵌套会逐渐变大，因为每个嵌套的字体大小都设置为 1.3em-其父字体大小的1.3倍。

显然不应该在所有属性中任意使用s，但通常它可以让您创建某种布局样式，通过简单地更改字体大小来自动缩放，从而避免为每个缩放编写规则。

关于转换：尝试只指定实际需要的属性，以便对结果有更多的控制。从mdn:

注意：可以动画的属性集可能会更改。 因此，应避免在列表中包含 不要现在动画，因为有一天他们可能会，造成意想不到的 结果。

我没有强制将所有按钮放在一行中，因为如果您将来添加更多按钮或更换设备（智能手机、平板电脑、pc)，您可能会看到它们自动转到多行。

最后一点注意：or元素还考虑HTML源代码中的换行符和空格。如果您想正确控制布局，不必在按钮之间插入行或换行，否则您将看到它们之间不依赖于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;
}

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