Wie ändere ich die Button-Farben beim Hovern?

Unterstützung
1

Hallo und danke für die tolle Komponente :slight_smile:

Ich versuche, die Button-Farbe etwas mehr anzupassen. Es sieht so aus, als müsste ich die CSS ändern, um die Hover-Eigenschaften (entweder Button-Farbe oder Textfarbe) zu ändern. Aber ich kann nicht genau herausfinden, wo ich das tun soll. Irgendwelche Hilfe?

2

Hallo @xomiamoore :slight_smile:

Sie können so etwas versuchen und die Farben und andere Eigenschaften nach Ihren Wünschen anpassen:

im gemeinsamen CSS eines Themas oder einer Themenkomponente:

// * Button-Hintergrund * //

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

// * Button-Textfarben //

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

// * Pfeil-Symbolfarben * //

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

Sie können auch hexadezimale Farbcodes (z. B. #000000) oder Themenvariablen (z. B. var(--secondary) für Farben verwenden.

3

Hallo Mia,

Da es immer noch gut zu wissen ist, haben wir ein Tutorial für diese Art von Modifikation: