0

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 enter image description here

<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;  
 }

2 Answers 2

0

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;

}

enter image description here

2
  • thank you, it works
    – Yuqi Sui
    Commented Jan 25 at 6:00
  • Glad, that it helped you !! Commented Jan 30 at 5:23
0

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: enter image description here With Hover: enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .