Come cambiare i colori dei pulsanti al passaggio del mouse?

Supporto
1

Ciao e grazie per l’ottimo componente :slight_smile:

Sto cercando di personalizzare un po’ di più il colore del pulsante. Sembra che per cambiare le proprietà al passaggio del mouse (sia il colore del pulsante che il colore del testo), debba modificare il CSS. Ma non riesco a capire esattamente dove farlo. Qualche aiuto?

2

Ciao @xomiamoore :slight_smile:

puoi provare qualcosa di simile e regolare i colori e le altre proprietà secondo le tue esigenze:

nel css comune di un tema o di un componente del tema:

// * sfondo del pulsante  * //

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

// * colori del testo del pulsante //

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

// * colori delle icone a freccia * //

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

puoi anche usare codici colore esadecimali (es: #000000) o variabili del tema (es: var(--secondary) per i colori.

3

Ciao Mia,

Dato che è comunque utile saperlo, abbiamo un tutorial per questo tipo di modifiche: