How to remove the gradient effect from the Buttons

General Help
,
1

Screenshot from 2024-09-30 09-41-08
Their is a gradient effect in the default buttons of the OS, I want to remove all of them. And in the drak mode the buttons glows, how can I removed them as well

2

You can create new files in ~/.config/gtk-3.0 and ~/.config/gtk-4.0 and name them each gtk.css

Paste the following into them:

notebook>header>tabs>arrow:checked,
headerbar viewswitcher button:checked:not(.text-button):not(.titlebutton),
button:checked {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}

notebook>header>tabs>arrow:checked:active,
headerbar viewswitcher button:checked:active:not(.text-button):not(.titlebutton),
button:checked:active {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
}

button.suggested-action,
headerbar button.suggested-action:not(.text-button):not(.titlebutton) {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
	font-weight: 700;
}

headerbar button:not(.text-button):not(.titlebutton):checked {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}

headerbar button:not(.text-button):not(.titlebutton):checked:hover {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}

headerbar button:not(.text-button):not(.titlebutton):checked:active {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
}

filechooser .path-bar.linked>button:checked {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}

filechooser .path-bar.linked>button:checked:active {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
}

switch:checked {
	background: #029be9;
}

check:checked,
radio:checked {
	background-clip: border-box;
	background: #029be9;
	box-shadow: none;
	color: white;
}

check:indeterminate,
radio:indeterminate {
	background-clip: border-box;
	background: #029be9;
	box-shadow: none;
	color: white;
}

levelbar block.high,
levelbar block:not(.empty) {
	background: #029be9;
}

row.activatable:selected {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}


row.activatable:selected:active {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
}

infobar.info button:checked,
infobar.question button:checked,
infobar.warning button:checked,
infobar.error button:checked {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}

infobar.info button:checked:active,
infobar.question button:checked:active,
infobar.warning button:checked:active,
infobar.error button:checked:active {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
}

.nautilus-window headerbar .linked.nautilus-path-bar .path-buttons-box button:checked {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
}

.nautilus-window headerbar .linked.nautilus-path-bar .path-buttons-box button:checked:active {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: none;
}

frame.geary-conversation-frame scrolledwindow treeview.view:selected {
	color: white;
	outline-color: rgba(255, 255, 255, 0.3);
	background: #029be9;
	box-shadow: 0 2px 4px rgba(21, 166, 240, 0.2);
	box-shadow: none;
}

Change #029be9 to your desired color in Hex or RGBA as you prefer... Save both files. Reload the desktop to test.

May need a screenshot of that one in order to understand the question...

1 Like