今回の記事では、WordPressテーマ：賢威7の「コメントを送信」ボタンを3D風にする方法を紹介していきたいと思います。
3D風のボタンと言ってもグラデーションを使うボタンではなく、セミフラットな感じで、マウスオーバーすると凹んだように形が変わっていくという、あのボタンです。
全く伝わっていないかもしれませんが、ブログをよく見るという方は、きっと見たことがあると思います。
カスタマイズ前
↓ 賢威7のコーポレート版をインストールしたばかりの状態
カスタマイズ後
カスタマイズ 1
↓ 色を緑にしてボタンの大きさや丸み側面の色を変更
↓ マウスオーバー時（ボタンがへこんだようになります）
カスタマイズ 2
↓ 「コメントを送信」ボタンを青く角ばった3D風ボタンにカスタマイズ（通常の状態）
↓ マウスオーバー時
コメントフォームのカスタマイズについては、以前書いた記事もあるので、よかったら参考にして下さい。
カスタマイズ 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;
}
「コメントを送信」ボタンが立体的になりました。
マウスオーバーするとほんの少し時間差で（アニメーションで）へこみます。
↓ マウスオーバー時
カスタマイズ 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風のボタンが出来上がります。
↓ マウスオーバー時（ボタンの色はそのまま）
色や（余白の）大きさなどは background: や padding: 部分を編集すれば、お好みのボタンにすることができるので、ぜひお試し下さい。
コメントを残す