How can I change button colors on hover in Impulse theme?

Store Design

Topic summary

A user working with Shopify’s Impulse theme needed help changing button colors on hover for their homepage. Their initial CSS attempt wasn’t working.

Solution Process:

  • Multiple developers provided CSS code snippets to add to the theme.css file
  • The code targeted specific buttons using the selector div#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small:hover
  • Key CSS properties included:
    • background-color and color using CSS variables
    • transition: all 0.2s ease for smooth hover effects
    • !important flags to override existing styles

Resolution:
The issue was successfully resolved. The working solution involved adding transition properties to the base button state and hover-specific color changes using Shopify’s CSS variables for primary button and savings text colors.

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

Hello

I am using the Impulse theme

How can i make some of my buttons on the home page change colour on hover

I have tried this but doesn’t seem to work

div#shopify-section-template–16194860515553__1641458950582c14a2 a.btn–secondary.btn–small:hover:after,.rte .btn–secondary.btn–small:hover:after{
border-color:{{ settings.color_body_text | default: “#1c1d1d” }};
border-color:var(–colorTextBody);
transition:border 0.3s ease;
}

2

@TBS2022

Please share your store URL! I can help you!

Thanks!

3

www.thebodyshop.re

password: lahays

thanks in advance

4

@TBS2022

Please add the following CSS to your assets/theme.css bottom of the file.

div#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small:hover {
border-color:{{ settings.color_body_text | default: "#1c1d1d" }};
border-color:var(--colorTextBody);
transition:border 0.3s ease;
background-color: #d6ce4b;
color: #004236;
}

Thanks!

5

I tried that already but it doesn’t work

6

@TBS2022

Remove the previous code and try this code

#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small:hover {
 border-color:{{ settings.color_body_text | default: "#1c1d1d" }};
border-color:var(--colorTextBody);
transition:border 0.3s ease;
background-color: #d6ce4b;
color: #004236;
}

if any problem let me know!

Thanks!

7

@TBS2022 Please send me store url.

8

@TBS2022

Remove the previous code and try this code

div#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small{
  transition: all 0.2s ease;
}
div#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small:hover {
border-color:var(--colorTextSavings);
background-color: var(--colorBtnPrimary) !important;
color: var(--colorTextSavings) !important;
}

if any problem let me know!

Thanks!

9

@TBS2022

Try this code

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
div#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small{
  transition: all 0.2s ease;
}
div#shopify-section-template--16194860515553__1641458950582c14a2 a.btn.btn--secondary.btn--small:hover {
border-color:var(--colorTextSavings);
background-color: var(--colorBtnPrimary) !important;
color: var(--colorTextSavings) !important;
}

Hope this works well for you.

Best Regards !

1 Like
10

super - that worked - thanks

11

@TBS2022

I also send the solution to you!

thanks Welcome again!

1 Like