Hi everyone. Is there a way to change a button’s background colour when it’s been clicked?
Say the button is clicked once, and the background of the button goes from white to grey to suggest this.
Here is my public share link: LINK
(how to access public share link)
Follow up question:
You could be looking at either using:
Hi Shawn. If a button is clicked a second time, it would ideally deselect and revert back to it’s original colour.
When clicked once, the button would change colour.
Hi @shwn I’m having this challenge at the moment too, similar to @SantiagoDev .
I have a button that changes colour on hover and pressed state but reverts to the original colour.
I would like same behaviour as Santiago describes above: stays in pressed state colour and then reverts to original when click again (deselected).
I’m new and can’t figure it out!
Create your button, select it, navigate to the Interactions panel.
Select the first option – Mouse click (tap)
Set and style the 1st click animation to change the BG color of your button when it is clicked.
Set and style the 2nd click animation to change the BG color of your button when it is clicked and supposed to toggle back to the original color.
Thanks @shwn I can see all list of different actions for 1st click etc but I can’t see where you can set bg color?!
On top of all the preset animations like slide, fade, jello, etc, the first option is to create a custom animation. Select that and then choose BG color.
Webflow has an amazing knowledge base for you to learn more about interactions and animations.
Thanks for that! I’ve been able to set the BG colour for the first click, but am unsure how to revert this with the second click. How should I do this?
thanks @shwn - sorted now. It was tricky as I thought it was done using states so would have been a long while figuring out the animations
Yes I use webflow uni but sometimes I can’t find what I’m looking for there
@SantiagoDev you need to add in another interaction on mouse click but this time select “on Second click” and follow the same steps you did first time around
The problem I’m finding is that when I change the background colour for “second click animation”, it seems to also change the background for first click…
Are you making the colour change in the 1st click transition or 2nd click transition?
It can be confusing. Give each interaction a name. e.g. changecolor and resetcolor
I’m trying to change colour on the first click, and reset on the second. Do you know where I can find “resetcolour/changecolour”?
Set the BG color of the 2nd click to be the original BG color of the button! And it will look as if it ‘reset’.
Set “Start an animation” for 1st click and 2nd click. In your new timed animation, select BG color to change.
If you still can’t do it, do the best you can when following these instructions, then share your read-only link to your project.
Thanks for that. The solution I found was to have two separate options selected. If you create one with BG colour, and try and change that on second click, it’ll also change the original. What works is creating a second BG colour option, and selecting that one for the second.
Thanks for your help Shawn!
Hi Santiago!!
I still can’t seem to get the second option to work - reverting back to the original background colour.
Please help 
