ボタンの色のカスタマイズについて

[Vektor,Inc]

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

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

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

[うなこ]

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

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を貼って質問されるとわかりやすいかもしれません。

[yunahana]

unako 様

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

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

Attachments:

You must be logged in to view attached files.

[DRILL LANCER]

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

[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/

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

[うなこ]

テストサイトありがとうございます、以下の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に効くようになっていると思います。

いかがでしょうか？

[yunahana]

unako 様

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

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

[yunahana]

unako 様

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

[投稿者]

投稿