[ 解決済 ] ボタンのホバー色の変更について

[leafletweb]

■ WordPress のバージョン
7.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.37.1

■ Pro Unit のバージョン
0.31.0

■ スキンの種類
Origin III

■ 期待する動作
トップページ_工務店_001の花壇にあるCTA内のお問い合わせボタンの色を（#000066）に変更したい

■ 自分で試した事
ボタンを選択して右側の設定バー内にある
カラーのところでカスタムカラーにして
ボタンカラーを（#000066）に、ホバー色を（#000066）に変更

■ 症状が発生するブラウザ
全て

■ 実際の症状
変更後にマウスオーバーするとボタンが白くなってしまう

■ その他特記事項
カスタムカラーでないものを選ぶとマウスオーバー時に選んだカラーになるのですが
カスタムカラーで指定したカラーにするとマウスアウト時の枠の色と文字の色が指定した色になるのですが
マウスオーバー時には枠のみ指定した色でボタンの背景は白くなってしまいます。
これをカスタムカラーではない設定のときと同じように背景も指定した色にしたのですがどうしたらいいでしょうか？
どうぞよろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[Y.INABA]

該当のボタンブロックにはカスタムCSSが入っていますので、それを例えば以下のように変更されてみてはいかがでしょうか？

※変更箇所にコメントを付けています。
※「ホバー背景色」は指定せずにクリアしていただき、以下CSS内にカラーコード等を設定ください。

selector.vk_button .vk_button_link.is-style-outline {
 position: relative;
 z-index: 0; 
 border-radius: 0;
 padding: 12px 35px;
 letter-spacing: 0.1em;
 min-width: 220px;
}
   
selector.vk_button .vk_button_link.is-style-outline::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 background-color: #699; /* 変更点1： 設定したいホバー背景色 */
 z-index: -1;
 transition: .3s;
}

selector.vk_button .vk_button_link.is-style-outline:hover::before {
 width: 100%;
}

selector.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::before {
 content: '';
 position: absolute;
 display: block;
 width: 70px;
 height: 1px;
 bottom: 50%;
 right: -35px;
 border-bottom: solid 1px #000; /* 変更点2： ボタンカラーで設定した色 */
}

selector.vk_button .vk_button_link.is-style-outline .vk_button_link_caption:after {
 content: '';
 position: absolute;
 display: block;
 width: 12px;
 height: 1px;
 background: #000; /* 変更点3： ボタンカラーで設定した色 */
 bottom: calc(50% + 5px);
 right: -35px;
 transform: rotate(45deg);
}

selector.vk_button .vk_button_link.is-style-outline:hover {
 opacity: unset;
 box-shadow: unset;
 background-color:  transparent !important;
 border: solid 1px #699; /* 変更点4： 設定したいホバー背景色 */
}

Attachments:

You must be logged in to view attached files.

[leafletweb]

Y.INABA様
思い通りの結果になりました。ありがとうございました。

[投稿者]

投稿