You can now add hover states to button layers, allowing you to define how a button looks by default and how it reacts when users hover over it. This helps you create clearer call-to-actions and more interactive designs.
How to add hover states to a button
Select a button layer in the editor.
A state switcher appears at the top of the button element.
Use the switcher to toggle between:
Default
Hover (mouse over)
Each state can be customized independently.
You can also customize the states from the contextual menu that opens when selecting the button layer.
What you can customize per state
For both Default and Hover states, you can edit:
Button fill
Solid color
Gradient
No fill
Button label
Text
Typeface
Font size
Letter spacing
Drop shadow (applies to both fill and label)
Button border
Color
Weight
Opacity
Rounded corners
Editing hover states in multi-size designs
In the multi-size editing environment, button state properties can be managed in two ways:
Edit globally
Use the left sidebar to update button properties across all sizes at once.
Create a size-specific variant
Click the pencil icon to enter individual editing mode for a specific size.
Select the button layer.
Customize the hover or default properties as needed.
Restore a variant to global button properties
If you want to revert a size-specific button back to the global settings:
Click the circular arrow icon at the top of the contextual menu.
This restores the global button properties for that size.
Ready to start designing?
👉 Sign up for a free Bannersnack account – it only takes a minute.
👉 Already have an account? Log in here to continue where you left off.