賢威7.0

「コメントを送信」ボタンを3D風にする方法 :賢威7

comment-button-thumbnail

今回の記事では、WordPressテーマ:賢威7の「コメントを送信」ボタンを3D風にする方法を紹介していきたいと思います。

3D風のボタンと言ってもグラデーションを使うボタンではなく、セミフラットな感じで、マウスオーバーすると凹んだように形が変わっていくという、あのボタンです。
全く伝わっていないかもしれませんが、ブログをよく見るという方は、きっと見たことがあると思います。

カスタマイズ前

↓ 賢威7のコーポレート版をインストールしたばかりの状態

comment-button-before

カスタマイズ後

カスタマイズ 1

↓ 色を緑にしてボタンの大きさや丸み側面の色を変更

comment-button-after-1-normal

↓ マウスオーバー時(ボタンがへこんだようになります)
comment-button-after-1-hover-1

カスタマイズ 2

↓ 「コメントを送信」ボタンを青く角ばった3D風ボタンにカスタマイズ(通常の状態)

comment-button-after-2

↓ マウスオーバー時

comment-button-after-2-hover

[ad]

コメントフォームのカスタマイズについては、以前書いた記事もあるので、よかったら参考にして下さい。

カスタマイズ 1. 緑色の3D風ボタンにする

まずは個別記事に表示される「コメントを送信」ボタンを、緑色の3D風ボタンにしていきます。

親テーマ(賢威7本体)の base.css や、子テーマの style.css などのCSSファイルに以下のコードを追加すると、、、

.btn-form01 {
    border-radius: 4px;
    padding: 10px 15px;
    background: #52a66a;
    box-shadow: 0 5px 0 #428b57;
}
.btn-form01:hover {
    background: #428b57;
    -webkit-transform: translate3d(0px,5px,1px);
    -moz-transform: translate3d(0px,5px,1px);
    transform: translate3d(0px,5px,1px);
    box-shadow: none;
}

「コメントを送信」ボタンが立体的になりました。

comment-button-after-1-normal

マウスオーバーするとほんの少し時間差で(アニメーションで)へこみます。

↓ マウスオーバー時

comment-button-after-1-hover-1

カスタマイズ 2. 青く角ばった3D風のボタンにする

次は青い3D風ボタンを紹介していきます。
先ほどのボタンと大きな違いはないので、カスタマイズの参考に、という感じなんですが、角の丸みを取ったり、マウスオーバーした時に色を変えない、など細かい部分を少し変えています。

こちらのボタンについても、お使いのCSSファイルに以下のコードを追加すると、、、

.btn-form01 {
    padding: 10px 15px;
    background: #22a7f0;
    box-shadow: 0 5px 0 #1c7eb4;
    border-radius: 0;
}
.btn-form01:hover,
.btn-form01:active,
.btn-form01:focus {
    background: #22a7f0;
    -webkit-transform: translate3d(0px,5px,1px);
    -moz-transform: translate3d(0px,5px,1px);
    transform: translate3d(0px,5px,1px);
    box-shadow: none;
}

青く角ばった3D風のボタンが出来上がります。

comment-button-after-2

↓ マウスオーバー時(ボタンの色はそのまま)

comment-button-after-2-hover

色や(余白の)大きさなどは background:padding: 部分を編集すれば、お好みのボタンにすることができるので、ぜひお試し下さい。