Buttons can use different styles for hover, focus, and active states, giving you more control over how they look during interaction.
For example, you can change the background or text color when someone hovers over a button, give it a different appearance when it receives focus, or adjust how it looks while it’s being clicked.
These small style changes can make buttons feel more responsive and give visitors clearer feedback when they interact with your page.
How to customize button interaction styles
- Open the page you want to edit.
- Select the Button block you want to customize.
- In the sidebar, open the More options menu (three dots) at the top of the block settings.
- Choose the state you want to edit, such as Hover, Focus, Focus Visible, or Active.
- Adjust the button’s style settings for the selected state.
- Repeat for any other states you want to customize, then return to Default to edit the button’s normal appearance.