Button background color stuck in "Hover" animation on return to original page

Design help Animations & Interactions
1

Hi Everyone,

I have a quick question. This issue only applies on my mobile device.

I’ve got buttons on my site with animations applied to change the background color from transparent to a solid color while being hovered over. This works great until I “click” the button (to be taken to a new page within my site) and then hit the “back” arrow up top. When I do this, the button I originally clicked remains a solid color. It doesn’t refresh automatically. This issue is only resolved when I refresh the page.

Are there any workarounds to this? I tried applying a “Page Load” element trigger to make the button default to transparent, and also tried using the “Hover” state to trigger the opacity change to a solid color and the “Clicked” state to make it return to transparent, but it didn’t seem to work.

I apologize if this has been asked before, but I couldn’t find an answer to it. Any insights are greatly appreciated!

Site link:

Video of problem:

2

Hi again @senecabryson

Browsers don’t refresh the page when you hit the back button. It is taking you back to the previous instance of the page.

A touch-based device, such as a tablet or phone, doesn’t have the mouse off event that a desktop computer has with a mouse. Effectively once you tap on the screen, your pointer is still hovering in the same place until you tap somewhere else.

An easy workaround for this is to change the hover state on tablet view down if using CSS animation or to not include tablet and mobile in the interaction if using Webflow interactions.

3

@Smith-Cordell Hello again :slight_smile: Thank you so much–this works like a charm!! I appreciate you a TON.

1 Like