customize button hover color

[Chandler-Zhu]

I need the button background to be green instead of blue when it is hovered, how to implement this in react ?

[claviska]

This can be done by customizing the button's base part.

sl-button[variant="default"]::part(base):hover {
  border: blue;
  background: blue;
  color: white;
}

sl-button[variant="default"]::part(base):active {
  border: darkblue;
  background: darkblue;
  color: white;
}

Example: https://codepen.io/claviska/pen/bGMVKQd?editors=0100

[jonasbirkelof]

For me this doesn't work. I have to switch place on the :hover and ::part so that it looks like this:

sl-button[variant="default"]:hover::part(base) {
  ...
}

Do you know why it is like this? It makes it hard to use sass nesting.

[claviska]

It might be a Sass thing — maybe the way they process the selectors. You'd have to look at the final output to see what your specific version is doing. It works as-is in the browser, though.