Custom CSS for hovering over a button (Theme: Reformation)

Technical Q&A

Topic summary

Issue: Button hover styles in the Reformation theme turned text black on a black background. Generic rules like .button:hover didn’t override theme styles; OP’s custom CSS adjusted background but not hover text/border.

Key details: CSS pseudo-class :hover wasn’t taking effect due to more specific theme selectors. OP also used ::before but hover text still failed to update.

Solution provided:

  • Steps: In Shopify Admin > Online Store > Theme > Edit code, open base.css/theme.css/styles.css/theme.scss.liquid and append overrides.
  • For the “Learn More” button: .layered-images-with-text__content–inner .button[title=“Learn More”]:hover { color: black !important; }
  • For the “Shop Now” button (slideshow): #shopify-section-template–17366299574294__16479477632637c9a7 .slideshow__slide-inner a.button.white:hover { color: white !important; }
  • These use higher specificity and !important to override theme defaults.

Outcome: OP confirmed both fixes worked; issue resolved. No further action requested. Screenshots illustrated the before/after results.

Status: Resolved; guidance may help others facing Reformation theme hover specificity conflicts.

Summarized with AI on December 28. AI used: gpt-5.
3

I have been able to edit the background button color with the below, new code, but for some reason the I can’t get the text color or border to change for the hover option.

.button {
background-color: #fd9018;
color: #000000 !important;
border-color: #fd9018;
}
.button::before {
background-color: #ba2d15;
color: #ffffff !important;
border-color: #ba2d15;
}