ブログデザイン備忘録～ CSSによるボタンデザイン例
今回は前回紹介したCodePenを使って、CSSを用いたボタンのデザインとマウスオーバー時のエフェクト（動作）を設定する例を紹介したい。はてなブログ上の記事ごとにボタンや文字装飾などを表示する場合は、記事ごとのCSSファイルが設定できるわけではないので以前紹介したHTMLタグのスタイル設定を用いる必要がある。
1. ボタンのデザイン
以前紹介した下記の記事中のHTMLタグのスタイル設定によるデザイン例をCSSで記述する。
基本的にはHTMLのタグにクラス名またはID名を設定し、CSSコード部分にクラス名を指定したセレクタ.クラス名{}を作成して、{}内にスタイルを記述していけばよい。HTMLタグ内にボタンのデザインを設定するコードを記述するよりもコード自体がすっきりすることがわかる。
See the Pen Button_test by ATATAT (@atatat) on CodePen.
2. ボタンのエフェクト
HTMLとjavascriptのイベントハンドラを用いたボタンのエフェクトについては下記の記事で紹介した。
今回はボタンのデザインと同様にマウスオーバー時の動作などのボタンのエフェクトについて以下のCSSで記述した。マウスオーバー時にデザインを変化させるには疑似要素hoverを用いて.クラス名:hover{}として{}内にマウスオーバー時のスタイルを記述する。javascriptのイベントハンドラではマウスがはずれたときのスタイルを記述しなければならなかったが、CSSでは記述の必要がないのでコードがすっきりする。
See the Pen button_hover by ATATAT (@atatat) on CodePen.
ボタンに動きをつける場合transform: translateY(4px);とすると下に移動する。また縮小・拡大する場合はtransform: scale(0.7);、変形する時間を指定するには、ボタンのデザイン側のCSSでtransition: all 1s;とする。
アイコンフォントはFontawesomeの代わりにGoogleマテリアルアイコンを使用している。
使い方はHTMLに<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">としてリンクを設定して、HTML中に<i class="material-icons">フォント名</i>とする。今回はplay_circle_filledとすると再生ボタンのフォントアイコンが表示される。
3. まとめ
今回はCodePenを用いてボタンのデザインとマウスオーバー時のエフェクト（動作）を設定する例を紹介した。
