Button colours

[FebruaryBloom]

I

I can’t find where to change the colours of the buttons once you hover over them - and also - I don’t want to have to go into every product - is there a way to change them in one go? (second picture is how I’d like them to look) any info is appreciated!

[suyash1]

@FebruaryBloom - add to cart can be changed on hover, shop pay button is added by shopify , so we do not have code for it to change

[GTLOfficial]

@FebruaryBloom
Your website url and password please.

[FebruaryBloom]

I’m ok with the purple one (I know that’s a Shopify button etc) - it’s the light one that’s hard to see

[Huptech-Web]

Hey @FebruaryBloom Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

[DaisyVo]

Hi @FebruaryBloom

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Code for Step 3:

.product-form__buttons button.product-form__submit:hover {
    background: #EDE6E2 !important;
}

Please let me know if it works. Thank you!

Best,

Daisy - Avada

[FebruaryBloom]

I tried that

But when I hovered over the same style happened sadly.

[FebruaryBloom]

It’s the hover - when I hover it changes to white and the #EDE6E2 colour and it’s too hard to see - I would like the button the same colour even on hover if that’s possible?

[DaisyVo]

Hi @FebruaryBloom

Could you please share your store link with me so I can investigate further?

Thank you!

Best,

Daisy - Avada

[FebruaryBloom]

www.february-bloom.com

[Huptech-Web]

Hello! @FebruaryBloom Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open it instead.
5. If you can’t find your custom CSS file, open “theme.css”
6. Add the following code at the end of the file.

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .features--button-transition :is(.button,.shopify-challenge__button,.shopify-payment-button__button--unbranded):not([disabled]):hover {
        color: #000 !important;
        background-position: var(--hover-background-position);
        border-color: #000 !important;
        background-size: 0 101%, 101% 101%;
    }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

[FebruaryBloom]

Hi - is it possible to get this button colour 94EFC9 ?

So not the first colour but the second one?