# How do I remove the button gradient effect?

**URL:** <https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782>\
**Category:** Development\
**Created:** [July 24, 2022, 4:08am UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782 "2022-07-24T04:08:25Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [July 24, 2022, 8:47am UTC](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782/4 "2022-07-24T08:47:44Z")

</div>

Hello,

If I understand it correctly this is the button’s `:active` status what you want to change.

There is a `linear-grandient` mixin to color transition.

> <https://github.com/discourse/discourse/blob/3d9464b7da85583670502fc68ea29880edaa4922/app/assets/stylesheets/common/foundation/mixins.scss#L53-L57>

`linear-gradient` used when the button is active. As you can see in the `buttons.css`

> <https://github.com/discourse/discourse/blob/3d9464b7da85583670502fc68ea29880edaa4922/app/assets/stylesheets/common/components/buttons.scss#L58-L62>

This whole is the default button mixin.

> <https://github.com/discourse/discourse/blob/3d9464b7da85583670502fc68ea29880edaa4922/app/assets/stylesheets/common/components/buttons.scss#L8-L102>

And only the colors variables changes on the other button like .btn-primary and below:

> <https://github.com/discourse/discourse/blob/3d9464b7da85583670502fc68ea29880edaa4922/app/assets/stylesheets/common/components/buttons.scss#L118-L126>

* * *

So you can override the `linear-gradient` mixin output with target the `active` classes.

Something like this should work. 🙂

_We have to target the button types classes because the color variables different so we cannot target it globally._

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

```

* * *

**Before**

**After**

---

_[View the full topic](https://meta.discourse.org/t/how-do-i-remove-the-button-gradient-effect/233782)._