Button Flashing on First use?

I am new to Webflow…so far so good as far as learning.

I’ve created my first button, for some reason the first time I hover over it something weird (like one of my background images) is flashing before the hover image appears.

After that it works fine until a page reload…I cannot figure out what it is!

Preview link: https://preview.webflow.com/preview/legends-of-ultima-static?preview=fe6c612a3fef1aa47ecc94a29a451c3f

Scroll down a bit to the buy button (can’t miss it)

I think it’s because you are doing an image swap and it takes a second for it to load that image. Each of them are 200k which is huge for such a small button. I suggest compressing those images using tinypng.com

Another thing is that the image doesnt actually change much, I’d suggest using CSS filters or even just a color overlay instead of doing an image swap. That way you’d also get to add a transition to it so it’s not so abrupt.

i’d also challenge your if you’re up for it to create those buttons in css. Would be an awesome task to do.

I have not done real code in so long it would be difficult :slight_smile: This project is something I am doing for fun while I learn Webflow and some code again. I planned to shrink the images but I have still never seen a glitch like that before…super bizzare.

I will try that though and see if that was the cause (compression)

8kb now, same issue - it’s not that.

Image swaps are not really used very often now in the web. Have you tried doing a filter or overlay for it? You can likely avoid having to even do an image swap that way.

I’m just used to the old days, they were always used. I will remove the image overlay and see if it removes the glitch.

The issue is not a big deal, I am trying to learn WHY it’s doing what it’s doing rather than just “do something else”

I will look into filter overlay :slight_smile: Again, I am brand new to this and have not done hand coding in like 10 years lol :slight_smile:

Edit: I set a little overlay - this works well enough.