Change color of each button dawn theme

Store Design
, ,

Topic summary

A user seeks to add different hover color effects to multiple buttons on their Phreshcare Co. website using the Dawn theme.

Requested Colors:

  • Button 1: #fb6445
  • Button 2: #ff2800
  • Button 3: #f2f427

Solution Provided:
A community member shared custom CSS code targeting specific button IDs with :hover pseudo-classes and !important declarations. The code should be added to the base.css file via: Online store > Themes > Current theme dots > Edit code > Search base.css.

Current Status:
Most buttons are working correctly, but one button’s hover effect isn’t functioning. The user requested additional troubleshooting help for the non-working button code. The issue remains partially unresolved pending further assistance.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

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.

Screen Shot 2024-08-20 at 3.45.30 pm.png
Screen Shot 2024-08-20 at 3.45.30 pm.png2798×1298 273 KB

2

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

Cheers thanks man

3

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

1 Like
4

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?