¿Cómo cambiar los colores de los botones al pasar el cursor?

Soporte
1

Hola y gracias por el increíble componente :slight_smile:

Estoy tratando de personalizar un poco más el color del botón. Parece que para cambiar las propiedades al pasar el ratón por encima (ya sea el color del botón o el color del texto), tengo que cambiar el CSS. Pero no logro averiguar exactamente dónde hacerlo. ¿Alguna ayuda?

2

hola @xomiamoore :slight_smile:

puedes probar algo como esto y ajustar los colores y otras propiedades a tus necesidades:

en css común de un tema o componente de tema:

// * fondo del botón * //

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

// * colores del texto del botón //

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

// * colores del icono de flecha * //

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

también puedes usar códigos de color hexadecimales (es decir: #000000) o variables de tema (es decir: var(--secondary) para los colores.

3

Hola Mia,

Como todavía es bueno saberlo, tenemos un tutorial para este tipo de modificación: