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!

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. app/assets/stylesheets/common/foundation/mixins.scss 3d9464b7d //noinspection CssOptimizeSimilarProperties @mixin linear-gradient($start-color, $end-color) { background-color: $start-color; background-image: linear-gradient(to bottom, $start-color, $end-color); } linear-gradient used when the button is active. As you can see in the buttons.css app/assets/stylesheets/common/components/buttons.scss 3d9464b7d &:active, &.btn-active { @include linear-gradient($hover-bg-color 0%, $bg-color 100%); border-bottom-color: $bg-color; } This whole is the default button mixin. app/assets/stylesheets/common/components/buttons.scss 3d9464b7d @mixin btn( $text-color: var(--primary), $bg-color: var(--primary-low), $icon-color: var(--primary-high), $hover-text-color: var(--secondary), $hover-bg-color: var(--primary-medium), $hover-icon-color: var(--primary-low) ) { @include form-item-sizing; display: inline-flex; align-items: center; justify-content: center; margin: 0; font-weight: normal; color: $text-color; background: $bg-color; cursor: pointer; transition: all 0.25s; .d-icon { color: $icon-color; This file has been truncated. show original And only the colors variables changes on the other button like .btn-primary and below: app/assets/stylesheets/common/components/buttons.scss 3d9464b7d .btn-primary { @include btn( $text-color: var(--secondary), $bg-color: var(--tertiary), $icon-color: var(--secondary), $hover-bg-color: var(--tertiary-hover), $hover-icon-color: var(--secondary) ); } 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

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.

How do I remove the button gradient effect?

Development

Falco (Falco) July 24, 2022, 4:17am 2

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

Topic		Replies	Views
How did they make a gradient header? Product Support	3	734	October 28, 2020
I want to change background color of my Sign Up and Login Button Feature	5	1771	April 8, 2020
Discourse Button Styles Theme component	40	11532	September 18, 2025
Customizing colors Product Support	9	3988	May 22, 2018
Change hover background color for nav class buttons Development	21	769	August 9, 2024

How do I remove the button gradient effect?

Related topics