CSS for changing the colour of the 'Start a chat' button

[delbot13]

I'm attempting to colourise the 'Start a chat' button. I think the best way to achieve this is through the custom CSS options in the widget design.

I've attempted this by adding the following code to the field named "Widget body additional CSS, takes effect after save":

.btn-secondary {
--bs-btn-bg: #0941b1;
--bs-btn-border-color: #0941b1;
}

Inspecting the page via the browser seems to prove that it's a secondary button style, but the above code isn't working and the button remains grey.

Please can someone suggest where I'm going wrong

Thanks.

[mysubcult]

I'm attempting to colourise the 'Start a chat' button. I think the best way to achieve this is through the custom CSS options in the widget design.

I've attempted this by adding the following code to the field named "Widget body additional CSS, takes effect after save":

.btn-secondary { --bs-btn-bg: #0941b1; --bs-btn-border-color: #0941b1; }

Inspecting the page via the browser seems to prove that it's a secondary button style, but the above code isn't working and the button remains grey.

Please can someone suggest where I'm going wrong

Thanks.

"Widget body additional CSS, takes effect after save".

.btn-secondary {
    background-color: #ff0059 !important; /* theme.colors.brandPink[6] */
    border-color: #ff0059 !important;
    color: #ffffff !important;

    border-radius: 8px !important; /* --mantine-radius-md */
    padding: 10px 20px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    width: 100% !important;
    font-size: 16px !important; 

    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

works like a charm.

[remdex]

Incorrect approach. Start chat button has dedicated css class to be used for overrides...