Как изменить цвет кнопок при наведении?

Поддержка
1

Привет и спасибо за отличный компонент :slight_smile:

Я пытаюсь немного настроить цвет кнопки. Похоже, чтобы изменить свойства при наведении (либо цвет кнопки, либо цвет текста), нужно править CSS. Но я не могу понять, где именно это нужно делать. Помогите, пожалуйста.

2

Привет @xomiamoore :slight_smile:

Вы можете попробовать что-то вроде этого и настроить цвета и другие свойства под свои нужды:

в общем CSS темы или компонента темы:

// * фон кнопки * //

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

// * цвета текста кнопки * //

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

// * цвета иконки стрелки * //

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

Вы также можете использовать шестнадцатеричные коды цветов (например, #000000) или переменные темы (например, var(--secondary) для цветов.

3

Привет, Миа!

Поскольку это всё ещё полезно знать, у нас есть руководство по такому типу изменений: