Can I change the background color of a button in Webflow when it's clicked?
TL;DR
- Use Mouse Click (Tap) interaction in Webflow to change the button’s background color on click, optionally creating a toggle effect.
- For a permanent background change, use custom JavaScript to set the new color when clicked.
- The built-in Pressed state only changes the color temporarily while the button is actively pressed.
You can make a button change background color when clicked in Webflow using interactions or custom states. Webflow doesn’t have a built-in “clicked” pseudo-class like :active, but you can simulate the effect.
1. Use the Mouse Click (Tap) Interaction
- Select the button on your canvas.
- Go to the Interactions panel (lightning icon).
- Click + (plus) next to Element Trigger, then choose Mouse Click (Tap).
- Set the First Click action to change the background color:
- Add a Start an Animation step, click + New Timed Animation.
- Add a Style property: choose Background Color, and pick a color.
- Optionally, set Second Click to return the button to its original color (like a toggle).
2. Use Custom Code for Permanent State Change
- If you want the background color to stay changed after the click without a toggle, you can inject custom JavaScript:
- Add an ID to the button (e.g.,
my-button). - Go to Page Settings > Custom Code or embed via the Embed element and use this:
- Use:
document.getElementById("my-button").onclick = function() { this.style.backgroundColor = "#FF0000"; };
- Use:
- This method permanently changes the button’s background color on click.
3. Use the Built-in "Pressed" State (for Temporary Effect)
- Click the button, and in the Selector panel, go to Pressed state.
- Set a temporary background color—this only shows while the button is physically pressed down, not after it’s released.
Summary
To make a button change background color when clicked in Webflow, use the Mouse Click (Tap) interaction to create a toggle or one-time change. For persistent color change across sessions or page reloads, you'd need custom JavaScript. The Pressed state only creates a momentary effect.