Comment changer les couleurs des boutons au survol ?

Soutien
1

Bonjour et merci pour cet excellent composant :slight_smile:

J’essaie de personnaliser un peu plus la couleur du bouton. Il semble que pour changer les propriétés au survol (couleur du bouton ou couleur du texte), je doive modifier le CSS. Mais je n’arrive pas à trouver exactement où faire cela. Une aide ?

2

salut @xomiamoore :slight_smile:

vous pouvez essayer quelque chose comme ceci et ajuster les couleurs et autres propriétés selon vos besoins :

dans le CSS commun d’un thème ou d’un composant de thème :

// * arrière-plan du bouton  * //

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

// * couleurs du texte du bouton //

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

// * couleurs de l'icône fléchée * //

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

vous pouvez également utiliser des codes de couleur hexadécimaux (par exemple : #000000) ou des variables de thème (par exemple : var(--secondary) pour les couleurs.

3

Salut Mia,

Comme c’est toujours bien de le savoir, nous avons un tutoriel pour ce genre de modification :