Adding shadow to a button with css (dmc)

Dash Python
1

I have a button:

dmc.Button(
      DashIconify(icon="mdi:dice-5", width=30, color="white"),
      color="rgb(8,81,156)",
      size="xs", 
      radius="xl",
      variant="gradient",
      gradient = { 'from': str(color_home), 'to': str(color_away), 'deg': 135},
      id="comp6_SELECTclick_randsquare",
)

which looks like this:

button

and I would like to add a shadow.

So I do this:

.button {box-shadow: 10px 10px; }

But nothing changes.

However, if I use the same css to the parent element, it works:

button_shadowPNG
button_shadowPNG150×126 2.59 KB

So the question: is there a way to override the “no shadow on buttons” with dmc?

2

That’s odd. It seems like Mantine is overriding the shadow color making it the same as the background. Try setting the color in the box-shadow. For example
{box-shadow: 10px 10px red}

And to target mantine buttons, you can use the selector .mantine-Button-root

3

yep! that did the trick. it was the same color as the background.

Thank you!