I am brand new (as of yesterday) to Webflow so apologies if I am missing something simple, but can’t figure this out.
I just copied this button into my site and the functionality completely changes once I did and would love to see what is causing it and how to fix it.
If you check the button link (below) in preview mode, you should see how it is supposed to look when hovered over, but after copy and pasted into a blank DIV, it changes completely.
ie: Missing the “shine/glisten” animation on the button edges, shrinking then growing a bunch, showing a solid gold shape inside the button that shouldn’t be there, etc.
Here is my public share link for the button: BUTTON LINK
Here is the public share link for the WIP site itself: SITE LINK
Style conflicts can occur when copying and pasting elements between Webflow sites, particularly with hover animations and effects. This happens because elements inherit styles from their parent containers, which may differ between the original and destination sites. Additionally, Webflow automatically adds numbers to duplicate interaction names when they have different actions, which can affect button animations.
To resolve these conflicts, paste your button directly onto the page first, before placing it in its final position. This helps minimize style inheritance issues and maintains the original button’s intended behavior.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
In case, you want to copy paste the button with its whole styling and hover behavior, you can copy the ✅ copy-me[button] element and place it in any div block and you should see it retain all its functionality.
I tried testing this and this should work as follows:
I’m not sure if this is part of the issue you’re experiencing, but looking at the interaction itself, I’m seeing some properties are not assigned to an element. If you know which element/style is supposed to have these properties, you can right-click/control-click on the exclamation and then choose “Change target” then go to the navigator and assign which element should be animating.
