custom background color

[jenninep1]

Can someone help with how to change the background and border? I have tried this css among many other classes and ID variations to no avail. hoping for a solution. thanks in advance
.atcb-button {
background-color: #ffab01 !important;
border: none !important;
}

[jekuer]

Hi @jenninep1 ,

Your approach will not work, because the button is protected by its own shadowDOM.
You can adjust those values via the styleLight and styleDark options (see https://add-to-calendar-button.com/de/configuration#stylelight).
In your case, asuming you are using the default button and only light mode, you could use styleLight="--btn-background: #ffab01;--btn-border:none;"

Best,
Jens

[jenninep1]

Thank you so much for your response. Is there also an option for the hover color? It is what right now which doesn’t go with the websites color palette. https://warriorsofstone.com/

…

On Sep 25, 2023, at 3:13 AM, Jens Kuerschner ***@***.***> wrote: Hi @jenninep1 <https://github.com/jenninep1> , Your approach will not work, because the button is protected by its own shadowDOM. You can adjust those values via the styleLight and styleDark options (see https://add-to-calendar-button.com/de/configuration#stylelight). In your case, asuming you are using the default button and only light mode, you could use styleLight="--btn-background: #ffab01;--btn-border:none;" Best, Jens — Reply to this email directly, view it on GitHub <#475 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCZH5YNP3KVO6ZXN4QTFIEDX4EVIRANCNFSM6AAAAAA5FHZROU>. You are receiving this because you were mentioned.

[jekuer]

you can override all variables you can find at https://github.com/add2cal/add-to-calendar-button/blob/main/assets/css/atcb.css - the ones starting with "--".