如何移除按钮的渐变效果？

开发
1

您好！

今晚我研究了一下，想通过一个设置来让按钮的点击效果成为可选的。我个人觉得它看起来很糟糕，但可能有些人非常喜欢它。
这就是我的意思，您可以通过点击并按住大多数按钮来看到它
image
在某些按钮上看起来更糟；
image

我不认为团队会考虑完全移除它，所以我想做一个站点设置，然后通过按钮 scss 来访问它。

我认为没有一个简单的文件可以直接创建一个设置并为其赋予属性。有吗？如果没有，我该如何做，然后将其应用到 SCSS 文件中？

感谢您的任何帮助！

2

这是否可以通过主题组件覆盖？

3 个赞
3

我猜我忘了这个特定问题的组件，哈哈

但未来是否可以创建设置？我稍后会在我这边修复这个问题

编辑：刚在我的这边尝试修复它，但没有成功。

4

你好，

如果我理解正确的话，你想改变的是按钮的 :active 状态。

有一个 linear-gradient 混合器用于颜色过渡。

linear-gradient 在按钮处于活动状态时使用。正如你在 buttons.css 中看到的：

整个部分是默认按钮混合器。

并且只有颜色变量在其他按钮（如 .btn-primary 及以下）中发生变化：

因此，你可以通过定位 active 类来覆盖 linear-gradient 混合器的输出。

像这样应该可以起作用。 :slightly_smiling_face:

我们必须定位按钮类型的类，因为颜色变量不同，所以我们不能全局定位它们。

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

之前

之后

5 个赞
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.