Change color of each button dawn theme

[Phreshcareco]

Hey guys,

Looking to add a hover effect on each button so when you hover it changes color. But i need each button to be different colors.

Url- www.phreshcareco.com.au

Any help would be appreciated. 

[goldi1]

Hello @Phreshcareco 

i can do this .I can do this just tell me what color you want the hover on each button

Thanks

[Phreshcareco]

First one is #fb6445
Second one is #ff2800
Third one is #f2f427

Cheers thanks man

[Sweans · Accepted solution]

Hi,

You change the color of hover by adding this css

button#quick-add-template--22881209352507__product-grid9641599566139-submit:hover {
    background-color: #fb6445 !important;
}
button#quick-add-template--22881209352507__product-grid9604785439035-submit:hover {
    background-color: #ff2800 !important;
}
button#quick-add-template--22881209352507__product-grid9641567158587-submit:hover{
    background-color:  #f2f427 !important;
}
button#quick-add-template--22881209352507__product-grid9614441054523-submit:hover{
    background-color:  #8fc128 !important;
}

button#quick-add-template--22881209352507__product-grid9605425594683-submit:hover{
    background-color:  #08c7e4!important;
}

Paste the above code in your base.css

Go to Online store > themes > Click on three dots of current active theme> edit code > search base.css in leftside bar > paste the above code.

I have also add the color for other two products  you can adjust the color according to your needs.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[Phreshcareco]

Hey @Sweans 

Worked a treat thankyou so much, its just one line thats not working not sure why? 

button#quick-add-template--22881209352507__product-grid9641599566139-submit:hover {
    background-color: #fb6445 !important;
}

 
The rest are all good :). Think you can help me out and check please?