[ 解決済 ] contact7で設置したボタンをLightningのボタンと同じ見た目にしたい

[s h]

■ WordPress のバージョン
6.4.3

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

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

■ テーマのバージョン
15.19.0

■ Pro Unit のバージョン
0.26.4

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.4

■ 期待する動作
<div class=”cf7__button”{>[submit “内容を確認”]</div>

こちらでボタンを設置しています。
Lightning　EverGreenの標準ボタン仕様（ふわっと光り、上下に動く）と同じにする方法はありますでしょうか？
もしくは、お問い合わせページにボタンを設置し、それをsubmitボタンにすることは可能でしょうか？

■ 自分で試した事
contact7側にボタンクラスを追加しましたが、反映されませんでした。

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

■ 実際の症状
contact7側のボタンは、ホバー時にふわっと光るのみで、上下の動きがありません。

[うなこ]

お世話になります。
たしかにcontactForm７のボタンに装飾がついていませんでした。
デザインスキンの修正を検討したいと思います。

お急ぎの場合は以下のCSSでいかがでしょうか？

/*ContactForm7のボタン*/
.wpcf7-submit.btn{
 box-shadow: 0 2px 10px 0 rgba(0,0,0,.12);
 transition: all .3s ease 0s;
}
.wpcf7-submit.btn:hover{
box-shadow: 0 0 5px 0 rgba(0,0,0,.12);
 transform: translateY(0.1875em);
    background-color: var(--vk-color-primary-vivid);
}

[対馬 俊彦]

うなこさん、こんにちは。横から失礼します。

できれば、CSS を以下のようにして、submit ボタンが無効なときは
マウスホバー動作をしないようにしていただくとうれしいです。

.wpcf7-submit.btn:not(:disabled):hover {
  box-shadow: 0 0 5px 0 rgba(0,0,0,.12);
  transform: translateY(0.1875em);
  background-color: var(--vk-color-primary-vivid);
}

これと関係して、Lightning の _g3/assets/css/style-theme-json.css
の以下の部分も合わせて変更を検討していただくとありがたいです。

input[type=submit]:hover {
    color: #fff;
    cursor: pointer;
    background-color: var(--vk-color-primary-dark);
}

　　　↓

input[type=submit]:not(:disabled):hover {
    color: #fff;
    cursor: pointer;
    background-color: var(--vk-color-primary-dark);
}

ボタンが無効のときにはマウスホバーで禁止マークが表示されますが、
使えない状態のボタンなので動きはない方がいいように思います。

もしかしたら、私の個人的な好みなのかもしれませんが…

皆さんいかがでしょうか？

[うなこ]

対馬さま

お世話になっております！そうでした、無効の場合を失念しておりました！
調整させていただきます。

いつもありがとうございます！

[s h]

うなこ様
対馬様

ご回答ありがとうございます。
ご教授いただいたCSSにて、希望の動きになりました。
大変助かりました。ありがとうございました。

[石川＠Vektor,Inc.]

Evergreen 0.2.5 にて対応いたしました。
アップデートすれば追加で記載したCSSを削除してもボタンは沈むようになっておりますのでご確認ください。

[石川＠Vektor,Inc.]

Lightning 15.20.0 に反映しました！

https://github.com/vektor-inc/lightning/pull/1121

[対馬 俊彦]

Lightning 15.20.0 にアップデートして、
ボタンが無効なときはマウスホバー動作をしないようになりました。

ありがとうございます！

[投稿者]

投稿