如何去掉button的点击样式？

去掉 button 的点击样式，方法有很多，取决于你想去除哪种样式以及你使用的 CSS 框架。以下是一些常见的方法：

1. 使用 CSS outline 属性:

点击 button 时，很多浏览器默认会显示一个 outline (轮廓)。要去除它，可以使用：

button:focus {
  outline: none;
}

button::-moz-focus-inner { /* Firefox */
  border: 0;
}

解释:

button:focus 样式在 button 获得焦点 (例如被点击) 时生效。
outline: none; 会移除所有轮廓样式。
::-moz-focus-inner 是 Firefox 特有的伪元素，用于去除 Firefox 中 button 的内边距和边框。

2. 使用 CSS appearance 属性:

这个属性可以改变元素的默认样式，使其看起来像操作系统的原生控件。将其设置为 none 可以移除大部分默认样式，包括点击样式。

button {
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* Standard */
}

解释:

-webkit-appearance 和 -moz-appearance 分别是 WebKit 内核浏览器 (Safari, Chrome) 和 Firefox 的私有属性。
appearance 是标准属性，但浏览器兼容性不如私有属性好。

3. 移除背景颜色变化:

有些 button 点击时背景颜色会变化。可以使用以下 CSS：

button:active {
  background-color: transparent; /* 或你想要的颜色 */
}

解释:

:active 伪类在元素被激活时 (例如鼠标按下) 生效。

4. 移除 box-shadow 变化:

如果 button 点击时有阴影变化，可以使用以下 CSS：

button:active {
  box-shadow: none;
}

5. 使用 JavaScript:

虽然不推荐，但你也可以使用 JavaScript 来移除点击样式。例如：

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('mousedown', () => {
    button.classList.add('no-click-style');
  });
  button.addEventListener('mouseup', () => {
    button.classList.remove('no-click-style');
  });
});

然后在 CSS 中定义 .no-click-style 样式：

.no-click-style {
  outline: none;
  /* 其他你想移除的样式 */
}

选择哪种方法？

最佳方法取决于你具体想要实现的效果。建议先尝试 outline: none; 和浏览器特定的前缀，如果无效再尝试其他方法。尽量避免使用 JavaScript，除非你真的需要动态控制样式。使用 appearance: none 会移除所有默认样式，所以你需要自己重新定义 button 的样式。

重要提示: 虽然移除点击样式可以实现某些视觉效果，但也要考虑到用户的可访问性。点击反馈对于用户理解交互至关重要，尤其对于使用键盘导航的用户。如果你必须移除默认样式，请确保提供其他形式的视觉反馈，例如改变文字颜色或添加动画。