How do i change the background of a button?

[ItsAllPeachy]

How do i change a buttons background color?
Yea, stupid question, I know- But I'm stuck!

Here is my eww.yuck file:

(defwidget bar []
  (box :orientation "v"
       :class "eww-bar"
       :vexpand "false"
       :hexpand "false"
  (top)))

(defwidget top []
  (box :orientation "v"
       :class "top"
       :space-evenly "false"
       :valign "start"
  (launcher)))

(defwidget launcher []
  (box :orientation "v"
       :class "launcher"
       :vexpand "false"
       :hexpand "false"
  (button :class "launcher-button"
          :onclick "scripts/launcher app_launcher" " ")))


(defwindow bar :geometry (geometry :x "0.5%"
                                   :y "6%"
                                   :height "88%"
                                   :width "50px")
                                   :monitor 0
                                   :reserve (struts :distance "35px"
                                  :side "left")
               :wm-ignore false
               :hexpand "false"
               :vexpand "false"
  (bar))

And here is the eww.scss:

*{
  border-radius: 10px;
}
.eww-bar{
  background-color: #303446;
}

.button {
  background-color: #000;
  border: none;
  padding: .5rem .2rem .3rem .2rem;
  font-size: 1.4em;
}

.launcher-button{
  padding: 1rem 0 1rem 0;
  font-size: 24; 
  background-color: #000; 
}

The problem it, I'm trying to change the background color of the button to black- I know its the right class because everything else applied correctly, but for some reason the background color is still white.

I did RTFM, clearly not well enough, and i couldn't find anybody else talking about this issue.

Any help is much appreciated! Thank you strangers!

[hypernova7]

Use

* {
  all: unset;
}

What is happening is that the global gtk theme styles are overriding your css styles, and using all: unset will help you give the styles you want to each widget from scratch.

[ItsAllPeachy]

This seemed to work, thank you!!!!