πHow to style hover, selected, disabled button states
Buttons can have different styles for different states. Here you'll learn how to give them a unique style for their 3 most common states.
Select the button to style:
In the βEditβ sub-menu open the βDesignerβ card.
Select the button or options buttons you want to style.
Specific button state styling:
Click "+ Sub-Elements".
Select the part of the component you want to style in the Options Selector. It could be "Button" or maybe you want to style the βCheckboxβ. For single Button components, it would be "Whole Thing".
Click "+ Filter".
Select the βWhenβ option that matches the button state you want to style e.g. "selected", βdisabledβ, or βhoverβ.
Any styles you set now, would only be visible when the button has the state youβve chosen.
Easy wasnβt it?! π
Disabled button styling:
Related docs:
PreviousHow to upload and apply images to your designNextHow to style CSS properties that are not there in the designer card (custom properties)
Last updated