ホバー時にボタンの色を変更する方法は？

サポート
1

こんにちは、素晴らしいコンポーネントをありがとうございます :slight_smile:

ボタンの色をもう少しカスタマイズしようとしています。ホバープロパティ（ボタンの色またはテキストの色）を変更するには、CSSを変更する必要があるようです。しかし、具体的にどこで変更すればよいのかわかりません。何か助けはありますか？

「いいね！」 1
2

hi @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;
    }
}

色には16進数カラーコード（例：#000000）やテーマ変数（例：var(--secondary）も使用できます。

「いいね！」 5
3

Miaさん、こんにちは。

参考までに、このような変更を行うためのチュートリアルがあります。

「いいね！」 3
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.