How do I remove the button gradient effect?

Development
4

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.

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

This whole is the default button mixin.

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

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

Something like this should work. :slightly_smiling_face:

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

// 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