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

このトピックには7件の返信、4人の参加者があり、最後に対馬俊彦により1年、 8ヶ月前に更新されました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)

投稿者

投稿
2024年2月1日 6:41 PM #84485

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側のボタンは、ホバー時にふわっと光るのみで、上下の動きがありません。

2024年2月2日 9:37 AM #84532
うなこ
モデレーター
お世話になります。
たしかに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);
}
```
2024年2月2日 10:51 AM #84539
対馬俊彦
参加者
制作実績
うなこさん、こんにちは。横から失礼します。

できれば、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);
}
```
ボタンが無効のときにはマウスホバーで禁止マークが表示されますが、
使えない状態のボタンなので動きはない方がいいように思います。

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

皆さんいかがでしょうか？
2024年2月2日 11:28 AM #84541

うなこ
モデレーター

対馬さま

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

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

2024年2月2日 11:46 AM #84544

s h
閲覧者

うなこ様
対馬様

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

2024年2月2日 4:14 PM #84555

石川＠Vektor,Inc.
キーマスター

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

2024年2月10日 3:47 AM #85659

石川＠Vektor,Inc.
キーマスター

Lightning 15.20.0 に反映しました！

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

2024年2月10日 4:49 PM #85720

対馬俊彦
参加者
制作実績

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

ありがとうございます！
投稿者

投稿