Can I alter the hover color of an HTML button?

Store Design
, , , ,

Topic summary

A user is attempting to change the hover color of an HTML button on their collection page but their current code isn’t working.

Problem Details:

  • The button in question is labeled “ADILAS2”
  • Initial attempt used inline CSS styling (shown in screenshots)
  • Goal is to change the button’s color on hover, not just underlined links

Suggested Solutions:

  1. Remove inline CSS approach: One respondent recommended removing inline styles and adding CSS separately using button:hover {color: #0000ff;} syntax with a custom hex color.

  2. Theme CSS file modification: Another suggestion involved:

    • Navigating to Shopify admin → Online Store → Themes → Edit code
    • Locating the Assets folder and opening base.css, style.css, or theme.css
    • Adding CSS code like .boost-sd__header-description a:hover {color: red;} at the bottom

Current Status:
The user reports that suggested solutions only affect underlined links, not the actual button element. The issue remains unresolved, with the user seeking a method specifically targeting the button hover state.

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

Can I change the hover color of a button in HTML? The code I tried is not working, screenshots below. URL: https://mglaser.com/collections/adige

sarahmglaser_0-1695752079923.png
sarahmglaser_0-1695752079923.png523Ă—227 12.3 KB

sarahmglaser_1-1695752094731.png
sarahmglaser_1-1695752094731.png533Ă—349 16.3 KB

1 Like
2

remove inline CSS then below the button code try adding this, replace color hex code with your preferred color:

button:hover {color: #ff0000;}

Example Code:
1 Like
3

Hi @sarahmglaser

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.boost-sd__header-description a:hover {
    color: red;
}
4

I am needing the actual button (“ADILAS2” in this case) to change color when hovering. I tried your solution but it only works on the underlined links. I am needing it to work on the button. Is this possible?