How to change the buttons' colors on hover?

Support
2

hi @xomiamoore :slight_smile:

you can try something like this and adjust the colors and other properties to your needs:

in common css of a theme or theme component:

// * button background  * //

.banner-box .button-container .close, 
.banner-box .button-container .toggle {
    background: silver;
    &:hover {
    background: yellow;
    }
}

// * button text colors //

.banner-box .button-container .close .d-button-label, 
.banner-box .button-container .toggle .d-button-label {
    color: red;
    &:hover {
    color: blue;
    }     
}

// * arrow icon colors * //

.banner-box .button-container .close svg, 
.banner-box .button-container .toggle svg {
    color: grey;
    &:hover {
    color: black;
    }
}

you can also use hexadecimal color codes (ie: #000000) or theme variables (ie: var(--secondary)) for colors.

5 Likes