How to customize button hover over color?

Store Design

Topic summary

A user customized button colors in their Shopify store but lost the hover animation effect in the process. They needed help restoring hover color changes for homepage buttons (slideshow, newsletter, and footer newsletter buttons).

Solution Provided:

  • Add custom CSS code to the theme.css file
  • Target specific button classes with :hover pseudo-selectors
  • Use !important flags to override existing styles
  • Example code provided for slideshow and newsletter buttons with black background and white text on hover

Follow-up Questions:

  • One user asked how to apply hover effects to all buttons site-wide
  • Another wants to add effects specifically to text-based buttons (like “SHOP”, “EXPLORE”) rather than every button
  • Discussion remains open with users seeking clarification on which specific buttons to target and preferred hover colors (white background with black text was mentioned as one preference)
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I recently coded some buttons to be a different color, but in doing so they don’t have a hover over color change animation anymore. How can I add this back in? The buttons I’ve edited on the homepage are the: slideshow button, newsletter button, and footer newsletter button.

What additional code should I add?

Shopify: dayoff.shop

2

hello @selinadg

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.slideshow__btn-wrapper>a:hover{
    background:#000000 !important;
    color: #ffffff !important;
}

#shopify-section-16222160641e5f632a .input-group__btn   .btn:hover {
 background: #000000 !important;
    color: #ffffff !important;
}

#shopify-section-footer .btn.newsletter__submit:hover{
    background: #000000 !important;
    color: #ffffff !important;
}
3 Likes
3

@Kinjaldavra thanks this worked!

4

Is there a way I can add this button hover colour to all buttons on my side?

5

hello @HollyHuxley

can you please share which button add hover color and which color to add the hover button

2 Likes
6

Hi,

Thank you for your response!
It is currently black with white text and I would like the hover colour to be white with black text.

Holly

7

i want the same solution except my buttons which i want to add effects are every “SHOP,EXPLORE.etc.” , i want it to on every button on my website