Customization banner button

Store Design
, , ,

Topic summary

A user seeks help customizing a banner button on their Shopify store to have a transparent background with white text and outline, but encounters a black background instead.

Initial Solution:

  • Add custom CSS code to the theme.liquid file (above the </body> tag)
  • Code sets transparent background, white border, and white text using !important declarations

Enhancement Request:

  • User wants to replicate an animated hover effect from a reference website
  • Desired animation: button transitions from white text/transparent background to black text/white background on hover, with left-to-right fill movement

Final Solution:

  • Upgraded CSS includes hover animation using ::after pseudo-element
  • Animation creates a width transition effect (0% to 100%) with white background fill
  • Uses mix-blend-mode: difference for color inversion effect
  • Transition timing set to 0.35s with ease

Outcome: Issue resolved successfully with both styling and animation implemented.

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

Hello. I would like to put the banner button with a transparent background and white letters and outline. But if I edit it in the menu to customize the theme colors, it comes up with a black background instead of a transparent one.
And if anyone knows, I would like to know how to animate the button as shown in the attached web link. Thank you very much.

Reference website:

https://agongym.com/

My website:

https://isardsports.com/

1 Like
2

Hey @Harny

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732108837253.png
Moeed_0-1732108837253.png1898×904 333 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Great. It looks much better, thank you very much.

Can I animate the button like the reference website when I move the cursor over it?
Right now the border is black. It would be great if it had the opposite color, white background with black letters with or without the movement from left to right.

4

Hi Harny,

Please use this upgraded one having animation within it

.banner__buttons a{
background: transparent !important;
border: solid 1px white !important;
color: white !important;
mix-blend-mode: difference;
}
.banner__buttons a:hover{
color:#000 !important;
}
.banner__buttons a:after {
height: 100%;
background: #fff;
width: 0%;
transition: all .35s ease;
z-index: -1;
}
.banner__buttons a:hover:after {
width:100%
}

Thanks

1 Like
5

Thank you both so much. It looks great now!