How do I add a "clicked" state to a button?

I want to add different formatting (background/border color, etc.) to a button when it’s clicked. Currently, there is no animation when clicking, therefore no feedback for the user.

Thanks!

Do you want the button to change colors = when the user presses down on the button, and then change back to the previous state once they let their mouse button go up?

Or, are you just wanting to change the color when they click on it, and then leave it that color?

Hi. The active class should do it

1 Like

Hi. Good point. My question was about the first scenario, but I would also want to know about the second.

Thanks. I would rather stay within the functionality of WeWeb, if possible. I believe custom CSS doesn’t render in the editor or preview modes, only in the published app. This makes it difficult to iterate on it.

Hello! Sure. I was thinking to add Active class here, but it didnt seem to do the job. I expected this to work. Maybe someone from WeWeb could clarify how to use additional states that we add here?

2 Likes

Hello!

The tech team is working on huge improvements to the states.

In the meantime, you’ll need to manually add an active state.

See Aurélie’s answer here.

1 Like

hi @Joyce just checking in if element state management (like active, clicked etc.) is in works or the timeline is still tbd.

hi, I just noticed that there is a state called “Active Link”. If I use that state, it works as intended. Just wanted to put it out there in case anyone was looking for it as well.

Hi @hsatl, we are still working on it :slight_smile:

2 Likes