How do I remove the button gradient effect?

Dev
1

Hi!

Tonight I was looking into making a PR to make the click effect on buttons optional via a setting. I think personally it looks pretty bad, but there are probably people that really like it.
This is what I mean, you can see it by clicking and holding down on most any button
image
It looks even worse on some buttons;
image

I dont think the team is looking to remove it completely, so I was going to look into making a site setting, then accessing it via the button scss.

I dont think there’s an easy file to just make a setting and give it a property. Is there? If not, how do I do it and then get it in the SCSS file?

Thanks for any help!

2

Isn’t this something that can be overwritten via a theme-component?

3 Likes
3

I guess I forgot about components for this issue in specific lol

But for the future is it possible to create settings? I will fix the issue on my end in a bit

EDIT: Just tried fixing it on my end and it didn’t work.

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

5 Likes
5

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