Styling GTK Buttons

[inkeaton]

Hi.
Sorry if this question may be somewhat unrelated, but i have a problem styling buttons which i cannot find an answer anywhere online

I made, for example, this simple widget:

config.js

import App from 'resource:///com/github/Aylur/ags/app.js';
import Widget from 'resource:///com/github/Aylur/ags/widget.js';

const myButton = () => Widget.Button({
    name: "button",
    className: "testbutton",
    label: "hi"
})

const Bar = ({ monitor } = {}) => Widget.Window({
    name: 'bar',
    anchor: ['top', 'left', 'right'],
    child: myButton(),
})

// exporting the config so ags can manage the windows
export default {
    style: App.configDir + '/style.css',
    windows: [
        Bar({ monitor: 0 }),
    ],
};

style.css

button {
  color: #E5EBE2;
  background-color: #9D4A2E; 
}

button :hover {
  background-color: aqua; 
}

this code should create an orange button, with teal text, that when hovered becomes aqua.
Instead, it follows my GTK theme settings, only the text seem to be affected

I just wanted to ask if some of you know about what may be the problem. Thanks in advance

[kotontrion]

button in css selects every button. There is probably another css selector which has priority.
you have added testbuttonas a classname, so you might want to use that in your css:

.testbutton {
  color: #E5EBE2;
  background-color: #9D4A2E; 
}

.testbutton:hover {
  background-color: aqua; 
}