Como alterar as cores dos botões no hover?

Suporte ao Produto
1

Olá e obrigado pelo componente incrível :slight_smile:

Estou tentando personalizar um pouco mais a cor do botão. Parece que para alterar as propriedades de hover (seja a cor do botão ou a cor do texto), preciso alterar o CSS. Mas não consigo descobrir exatamente onde fazer isso. Alguma ajuda?

2

oi @xomiamoore :slight_smile:

você pode tentar algo assim e ajustar as cores e outras propriedades às suas necessidades:

no css comum de um tema ou componente de tema:

// * fundo do botão  * //

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

// * cores do texto do botão //

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

// * cores do ícone de seta * //

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

você também pode usar códigos de cores hexadecimais (ou seja: #000000) ou variáveis de tema (ou seja: var(--secondary) para cores.

3

Oi Mia,

Como ainda é bom saber, temos um tutorial para esse tipo de modificação: