How can I change button color on hover in Symmetry theme?

Topic summary

A user working with the Symmetry theme needs buttons on their homepage (slideshow and gallery sections) to change color on hover, specifically wanting a white color effect.

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Insert custom CSS code before the closing tag

Additional context:

  • The user referenced a CodePen example showing the desired hover animation effect
  • A PageFly support representative provided CSS code snippets to achieve this customization

Outcome: The solution was successfully implemented and confirmed working by the original poster.

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

Hi,

I am using the symmetry theme.

How can i make my buttons on the home page( slideshow and gallery) change color(white) on hover.Thank you!

Here is my website:https://phantomgogo.com/

Hi @Kathy518 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :


Hope my answer will help you.

Best regards,

Victor | PageFly

[https://codepen.io/ArnoldKos/pen/vNEpYm](http:// https://codepen.io/ArnoldKos/pen/vNEpYm)

Thanks for the reply. I think I need the action like above example. What can I do?

You can try this code below:


1 Like

Thanks a lot. It works!

1 Like