今回の記事では、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:
部分を編集すれば、お好みのボタンにすることができるので、ぜひお試し下さい。