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

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

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

1 カスタマイズ前
2 カスタマイズ後
3 カスタマイズ 1. 緑色の3D風ボタンにする
4 カスタマイズ 2. 青く角ばった3D風のボタンにする

カスタマイズ前

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

カスタマイズ後

カスタマイズ 1

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

↓ マウスオーバー時（ボタンがへこんだようになります）

カスタマイズ 2

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

↓　マウスオーバー時

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

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

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

親テーマ（賢威7本体）の base.css や、子テーマの style.css などの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;
}

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

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

↓ マウスオーバー時

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

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

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

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;
}