Background color of lightning Button

Question

Hello everybody I want to style the background color of a lightning button with a color so I went to check the Salesforce documentation and found out this:

So I did something like that:

.greenBackgroundButton{
      background-color: #3bcf56;
}

<lightning-button class="greenBackgroundButton" label="Crear paso" onclick={handleValidacion}  ></lightning-button> 
   

But the background color is not changing. Could anybody help me? Thanks

Answer 1

.greenBackgroundButton{
    background-color: #3bcf56;
}

Should be:

.greenBackgroundButton{
  --sds-c-button-brand-color-background: #3bcf56;
  --sds-c-button-brand-color-border: #3bcf56;
  --sds-c-button-brand-color-background-hover: #3bcf56;
  --sds-c-button-brand-color-border-hover: #3bcf56;
}

Note that this is called a "styling hook." These are styles that affect components using CSS variables. This is the only way to style some properties of a child component in a parent component, explained by the Shadow DOM and Styling Hooks documentation.

Since this hook uses the brand color, make sure you specify variant="brand".

Demo.

Answer 2

The actual button you are seeing is an element inside the LWC component lightning-button. Hence you have to target the button element in the lightning-button.

Just change your css to below code:

.greenBackgroundButton button.slds-button {
      background-color: #3bcf56;
}