# 如何移除按钮的渐变效果？
**URL:** https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782
**Category:** Development
**Created:** [2022年七月24日 04:08 UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782 "2022-07-24T04:08:25Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2022年七月24日 04:08 UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782/1 "2022-07-24T04:08:25Z")
您好！
今晚我研究了一下，想通过一个设置来让按钮的点击效果成为可选的。我个人觉得它看起来很糟糕，但可能有些人非常喜欢它。
这就是我的意思，您可以通过点击并按住大多数按钮来看到它
在某些按钮上看起来更糟；
我不认为团队会考虑完全移除它，所以我想做一个站点设置，然后通过[按钮 scss](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/components/buttons.scss) 来访问它。
我认为没有一个简单的文件可以直接创建一个设置并为其赋予属性。有吗？如果没有，我该如何做，然后将其应用到 SCSS 文件中？
感谢您的任何帮助！
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2022年七月24日 04:17 UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782/2 "2022-07-24T04:17:32Z")
这是否可以通过主题组件覆盖？
---
### Author:  [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [2022年七月24日 04:19 UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782/3 "2022-07-24T04:19:02Z")
我猜我忘了这个特定问题的组件，哈哈
但未来是否可以创建设置？我稍后会在我这边修复这个问题
编辑：刚在我的这边尝试修复它，但没有成功。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2022年七月24日 08:47 UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782/4 "2022-07-24T08:47:44Z")
你好，
如果我理解正确的话，你想改变的是按钮的 `:active` 状态。
有一个 `linear-gradient` 混合器用于颜色过渡。
>
`linear-gradient` 在按钮处于活动状态时使用。正如你在 `buttons.css` 中看到的：
>
整个部分是默认按钮混合器。
>
并且只有颜色变量在其他按钮（如 .btn-primary 及以下）中发生变化：
>
* * *
因此，你可以通过定位 `active` 类来覆盖 `linear-gradient` 混合器的输出。
像这样应该可以起作用。 🙂
_我们必须定位按钮类型的类，因为颜色变量不同，所以我们不能全局定位它们。_
```scss
// Default button
.btn {
&:active,
&.btn-active {
background-image: none;
border-bottom-color: transparent;
background-color: var(--primary-medium);
}
// Primary button
&.btn-primary {
&:active,
&.btn-active {
background-color: var(--tertiary-hover);
}
}
// Danger and ✘ button
&.btn-danger,
&.cancel {
&:active,
&.btn-active {
background-color: var(--danger-hover);
}
}
// ✔ button
&.ok {
&:active,
&.btn-active {
background-color: var(--success-hover);
}
}
}
```
* * *
**之前**
**之后**
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2022年十二月8日 15:40 UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782/5 "2022-12-08T15:40:14Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.