Integrate different button style states (hover, Active, Focus)

Ask the Community Customization
,
1

Could you give me a CSS Code to enter different buttons style states?

Enabled: #161616
Hover: #292929
Active: #393939
Focus: X:0 Y:0 B:0 S:2 #E0000F, X:0 Y:0 B:0 S:3 #FFFFFF

Thx and BR

2 Likes
3

Hi there, @user14693 :waving_hand:

You can change the button color in the Enabled state right in the settings:

image
image330×593 8.02 KB
image
image332×820 34.8 KB


And here is the CSS code to change button color in active, hover and focus states:

/* Hover */
.global-styles,
[class*="Button__Inner-sc"]:hover {
    background-color: #292929;
}

/* Active */

.global-styles,
[class*="Button__Inner-sc"]:active {
    background-color: #393939;
}

/* Focus */
.global-styles,
[class*="Button__Inner-sc"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #E0000F, 0 0 0 3px #FFFFFF; 
}

Please check it out and let me know how it worked :wink:

1 Like