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

Store Design
,

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.
1

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/

2

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

3

[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?

4

You can try this code below:
1 Like
5

Thanks a lot. It works!

1 Like