Turbo Theme Hero Section Button Hover Effect

Store Design

Topic summary

A user is experiencing an issue with a button hover effect on their Turbo theme homepage. Despite configuring hover settings in the theme settings, the button doesn’t change to white on hover as intended.

Attempted Solutions:

  • First suggestion: Add custom CSS to theme.liquid file targeting the button class with !important declarations for white text and black background on hover
  • Second suggestion: Add CSS to various stylesheet files (base.css, theme.css, etc.) targeting the specific banner section

Current Status:

  • The first CSS solution did not resolve the issue
  • User reports not having the suggested stylesheet files in their theme
  • Discussion remains unresolved - user is seeking a Turbo theme-specific solution that works within the theme’s native settings or file structure

The conversation includes a screenshot showing the button and its current hover state, plus the site URL with password for troubleshooting.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have this button on my home page, and have my hover settings correctly setup in the theme settings, but when I hover over the button, it doesn’t hover correctly. I want the button to be white on hover but it doesn’t change color. How can I fix it?

alexlomt1_0-1741108708297.png
alexlomt1_0-1741108708297.png1230×465 83.6 KB

2

hey @alexlomt1 plz share the URL of your website

3

https://mmz7sv-mw.myshopify.com/

PW: seupri

4

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

a.action_button.first_button.highlight-true:hover {
    color: white !important;
    background-color: black !important;
}

MustafA16_0-1741109430027.png
MustafA16_0-1741109430027.png1900×653 108 KB

5

It didn’t work. Is it not possible to adjust this through the settings of the theme?

6

Hi @alexlomt1 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

section#banner-1489283389016 .action_button:hover {
    background: white !important;
    border-color: white !important;
}
7

I don’t have any of those files. Is there a solution specific to the Turbo theme?