VWSとは フォーラム Lightning [ 解決済 ] ボタンの色のカスタマイズについて

[ 解決済 ] ボタンの色のカスタマイズについて

このトピックには7件の返信が含まれ、4人の参加者がいます。3 週間、 1 日前 yunahana さんが最後の更新を行いました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #22977

    Vektor,Inc
    キーマスター

    現在Lightning ProのJPNSTYLEでサイトを作成しております。
    そこでボタンの「btn-default」を使っているのですが、ボタンにマウスをあわせた時に色が変わるのですが、その色合いがとても好きで、自分でも色々やてみましたが、ボタンの枠部分の繊細な部分が出来ませんでした‥。

    ボタンにマウスをあわせた時に変化する状態が最初の表示になるようなボタンの作成をお願いしたいのです。
    そして、マウスを合わせた時には現在の最初の表示になるように‥最初の表示でなくてもかまいません。少し変化するだけでも良いです。

    どうぞよろしくお願いいたします。

    #23011

    unako
    参加者

    「最初の表示になるようなボタン」というのは、どこの表示のことなのかが分からなかったのですが、
    以下の解釈で回答します。

    JPNSTYLEのデザインスキンで「btn-default」のクラスを使用してボタンを作成していて
    ボタンのボーダー色やボタンの色をキーカラーではなく自分で変更するcssが書きたい。
    ※#〇〇〇と#△△△の部分はお好きなカラーコードを入れてください。

    .btn-default {
        border-color: #〇〇〇;
        color: #f00;
    }
    .btn-default:after {
        border-color: #〇〇〇 !important;
    }
    
    /*フォーカス時マウスオーバー時*/
    .btn-default:focus,
    .btn-default:hover {
        background-color: #△△△;
    }

    もし質問の意図が違っていましたら、ごめんなさい…。

    画像や、差し支えなければURLを貼って質問されるとわかりやすいかもしれません。

    #23049

    yunahana
    参加者

    unako 様

    教えていただいたボタンの変更をしてみましたが、思うような表示ができませんでした。
    画像を添付いたしましたが、Aが通常の「btn-default」ですが、これをBのように反対にしたいのですが、このような変更は出来るのでしょうか?

    よろしくお願いいたします。

    • この返信は3 週間、 4 日前に  yunahana さんが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #23091

    RICK
    参加者

    該当ボタンの実装方法やボタン部分のHTMLがわかればよいのですが・・・
    普通に.btn-defaultをいじっただけでは上手く行かない場合もあると思うので・・・

    #23099

    yunahana
    参加者

    RICK 様

    コメントありがとうございます。
    該当ボタンの実装方法とは、下記のような記述の事でしょうか?
    <a href="/#/" class="btn btn-default btn-lg">お問い合わせフォーム</a>

    テストサイトでボタンを設置してみました。
    記述
    <a href="/#/" class="btn btn-default btn-lg">お問い合わせフォーム</a>

    こちらで何かヒントになりますでしょうか?
    https://wptest.yunahana.com/sample-page/

    お手数をおかけいたしますが、よろしくお願いいたします。

    • この返信は3 週間、 3 日前に  yunahana さんが編集しました。
    • この返信は3 週間、 3 日前に  yunahana さんが編集しました。
    #23208

    unako
    参加者

    テストサイトありがとうございます、以下のcssでいかがでしょうか?
    追加cssなどに張り付けてください。

    .siteContent .btn-default {
        border: 2px solid rgba(255,255,255,.5);
        background-color: #337ab7;
        color: #fff;
    }
    .siteContent .btn-default:after {
        border: 1px solid rgba(255,255,255,.5);
    }
    
    .siteContent .btn-default:hover {
        border: 2px solid #337ab7 !important;
        color: #337ab7;
        background:#fff;
    }
    .siteContent .btn-default:focus:after, 
    .siteContent .btn-default:hover:after {
        border: 1px solid #337ab7;
    }

    もともとテーマ内に記述してあるcssの「.siteContent .btn-default」が付いているクラスが優先されてしまう箇所がありましたので、「.siteContent .btn-default」にして記述しました。
    .siteContent内の.btn-defaultに効くようになっていると思います。

    いかがでしょうか?

    • この返信は3 週間、 2 日前に  unako さんが編集しました。
    #23235

    yunahana
    参加者

    unako 様

    ボタンのコード、ありがとうございます!
    すぐにでも試してみたくてワクワクしているのですが、パソコン触れるのが夜になります。
    またご連絡させていただきます!

    よろしくお願いいたします。

    • この返信は3 週間、 2 日前に  yunahana さんが編集しました。
    #23253

    yunahana
    参加者

    unako 様

    帰宅して、早速cssにコードを貼り付けました。
    完璧すぎて感動しました!
    本当に本当にありがとうございました!
    他のサイトにも色を変えて応用したいと思います。
    ありがとうございました!

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

このトピックに返信するにはログインが必要です。