Can I change the background color of a button in Webflow when it's clicked?

You can change the background color of a button in Webflow when it's clicked using either interactions or custom states, depending on whether the style should persist.

​

1. Use Interactions for Click Effects

​

• Go to the Interactions panel (lightning bolt icon in the right sidebar).
• Select the button and click + Element Trigger > Mouse Click (Tap).
• Under On 1st Click, add a New Timed Animation.
• Inside the animation, use Background Color to set the new color.
• If needed, add a second timed animation under 2nd Click to toggle it back.

​

This method visually changes the color when clicked, but does not persist after page reloads.

​

2. Use a Custom Clicked Class for Persistent Styling

​

• Create a custom class—for example, .button-clicked—and style it with your desired background color.
• Add a Click Trigger interaction.
• In the animation, instead of changing the background directly, Add Class: button-clicked.
• Optionally, use Remove Class to toggle the effect.

​

This lets the style persist if additional logic or CMS/framer integrations control it further, though it still resets on refresh.

​

3. Use Custom Code (When Needed)

​

Webflow doesn’t have native support to permanently change a button's state (like :active) without reloading, but for more advanced behaviors (e.g., persisting a click state), you can embed a small script using the </> Embed component or via Project Settings > Custom Code.

​

Summary

​

To change a button’s background color when clicked in Webflow, use Mouse Click (Tap) interactions to either animate the color or toggle a custom class. For persistent click states beyond visuals, custom code is required.