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

VWSとは フォーラム Lightning [ 解決済 ] contact7で設置したボタンをLightningのボタンと同じ見た目にしたい

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

  • このトピックには7件の返信、4人の参加者があり、最後に対馬 俊彦により2週、 5日前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #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側のボタンは、ホバー時にふわっと光るのみで、上下の動きがありません。

    #84532

    うなこ
    モデレーター

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

    お急ぎの場合は以下の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);
    }
    #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);
    }

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

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

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

    #84541

    うなこ
    モデレーター

    対馬さま

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

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

    #84544

    s h
    参加者

    うなこ様
    対馬様

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

    #84555

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

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

    #85659

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

    Lightning 15.20.0 に反映しました!

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

    #85720

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

    ありがとうございます!

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。