lightning-button hover not working

Question

I wanna customise the lightning button, and added the btn-cta css, but it's not working at all. I've already used hook thing, but hover on the button, the default color still there, can anyone help with it? thanks

<lightning-button variant="brand" label="Contact" onclick={handleClick} class="btn-cta"></lightning-button>`  
 .btn-cta {  
     min-width: 120px;  
     padding: 10px;  
     text-align: center;  
     color: #fff;  
     background-color: #024;  
     font-family: "Maax";  
     border-radius: 5px;
     font-weight: bold;  
     --sds-c-button-brand-color-background: #024;  
     --sds-c-button-brand-color-border: #024;  
     --slds-c-button-brand-color-background-hover: #ee6421;  
 }

.btn-cta:hover {   
     background-color: #ee6421!important;  
     --slds-c-button-brand-color-background-hover: #ee6421!important;  
 }

Answer 1

You should use this styling hook:

--slds-c-button-brand-color-background-hover

Check below code, it should work now :

.btn-cta {
min-width: 120px;
padding: 10px;
text-align: center;
color: #fff;

font-family: "Maax";
border-radius: 5px; font-weight: bold;
--sds-c-button-brand-color-background: #024;
--sds-c-button-brand-color-background-hover: #ee6421;

}

Answer 2

According to the documentation, the CSS variables for the brand variant are:

• --slds-button-brand-color-background
• --slds-button-brand-color-border
• --slds-button-brand-color-background-hover

You are using --sds-c-button-brand-color-background and --sds-c-button-brand-color-border, which are not valid CSS variables for the lightning button component. You are also using --slds-c-button-brand-color-background-hover, which is missing the button part.

To fix this, you can change your CSS variables to match the documentation. For example, you can change this line of code:

--sds-c-button-brand-color-background: #024;

to this:

--slds-button-brand-color-background: #024;

You can also remove the !important modifier from your hover styles, as it is not necessary and may cause conflicts with other styles. HTML::

<lightning-button variant="brand" label="Contact" onclick={handleClick} class="btn-cta"></lightning-button>

CSS::

.btn-cta {  
    min-width: 120px;  
    padding: 10px;  
    text-align: center;  
    color: #fff;  
    background-color: #024;  
    font-family: "Maax";  
    border-radius: 5px;
    font-weight: bold;  
    --slds-button-brand-color-background: #024;  
    --slds-button-brand-color-border: #024;  
    --slds-button-brand-color-background-hover: #ee6421;  
 }

.btn-cta:hover {   
    background-color: #ee6421;  
    --slds-button-brand-color-background-hover: #ee6421;  
}

Output:: Without Hover: With Hover: