Streaming live at 10am (PST)

Button animation on click


#1

I would like to change an icon on click, so when I click on a default svg icon it changes to another svg icon. Ideally I would like users to be able to “undo” the action and switch back to the default icon. Can I do it in Webflow?
Thx!


#2

Hey @Josef the only way I can think of doing state changes like this with webflow natively, would be to have duplicate buttons inside a container, and then show/hide the respective buttons when the other button is clicked.

Your structure could be something like:

<div>
    <button class="button button-1">[ICON 1]</button>
    <button class="button button-2">[ICON 2]</button>
</div>

You could set button-2 to display:none initially, and then change it to display:block when button-1 is clicked, while also setting button-1 to display:none — and vice versa.

That wouldn’t be ideal from a semantics standpoint, but it’s the only way I can think of with native interactions – otherwise you could use custom code.


#3

You could simply add the 2 icons in the div, but make them Absolute. Then make their parent div overflow: hidden. Then slide the second icon out of view to the right. Use interaction to make the first icon slide out of view, bring the second icon into view.

On second click reverse the action. That should do it. :grinning:

Let me know if you need assistance.


#4

thanks a lot for your help!


#5

No problem… have fun!