Customization banner button

Store Design
, , ,
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!