How to change the buttons' colors on hover?

Support
1

Hello and thanks for the awesome component :slight_smile:

I am trying to customize the button color a bit more. It looks like to change the hover properties (either button color or text color), I have to change the CSS. But I can’t figure out exactly where to do that. Any help?

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.

3

Hi Mia,

As it’s still good to know, we have a tutorial for this kind of modification: