以前はボタン型のデザインを画像で作ることが多かったんですが、最近ではCSSだけでボタンを作ることの方が多くなりました。
様々なところで活用できるフラットデザインのボタンをCSSだけで作る方法をご紹介します。
CSSだけでフラットデザインのボタンを作る
CSSだけでボタンのデザインをするようになった理由は、様々な解像度のデバイスに対応するため。
iPhone 6 Plusなどの高解像度ディスプレイのデバイス用にわざわざ画像を用意するのも手間ですし、あらかじめCSSだけでデザインしていればどんなデバイスでも常にキレイな状態で見せることができます。
デメリットとしてはRSSで配信された際にCSSが適用されずにテキストだけ表示されてしまうことですが、RSSリーダー利用者数も減って来てますし、一応ボタンのところに置いてあるテキストは表示されますので、そのテキストの書き方を工夫すれば問題ないと思ってます。
フラットデザインのボタンのソースを細かく解説
では、フラットデザインのボタンのソースを公開します。あくまで一例ですが、基本形なのでCSSが苦手な方はここから始めてみて、余裕があれば改造してみてください。
クラス名や数値などは適当です。ご自分の環境に合わせてうまいことやってください。
ではソースです。
<div class="button"><a href="">テキスト</a></div>
.button a {
width: 280px;
background-color: #aaaaaa;
border-radius: 3px;
box-shadow: 0 3px 0 rgba(136,136,136,1);
color: #ffffff;
display: block;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
margin: 10px auto;
padding: 10px 0;
}
.button a:hover {
box-shadow: 0 1px 0 rgba(136,136,136,1);
margin: 12px auto 8px;
}
▼実際にできたボタンがこちら。
細かく解説していきます。
ボタンの形
width: 280px;
幅はディスプレイからはみ出ないように調整します。iPhone 5以前の320pxに収まれば大丈夫だと思います。
高さを指定しないでもpaddingで調整すれば高さが稼げますので、heightは書いてません。
background-color: #aaaaaa;
背景の色を指定します。お好きな色を入れてください。
border-radius: 3px;
角を丸くします。数字をでかくすればより丸みが出ます。
box-shadow: 0 3px 0 rgba(136,136,136,1);
ボタンに立体感を出します。背景色より濃いめの色に設定ください。数字は左からX軸、Y軸、ぼかしです。ぼかしを0にしないとただのシャドウがかかった状態になってしまうので気をつけてください。
display: block;
aタグにこれを指定しないと幅や高さが指定したとおりになりません。
margin: 10px auto;
ボタンの外側の余白です。横方向にはautoを指定して画面の真ん中にボタンが来るようにしてます。縦方向の余白は必要に応じて数値を調整してください。
padding: 10px 0;
ボタンの内側、テキストの周りの余白を調整します。こちらも必要に応じて好みの数値を入れてください。
テキストのデザイン
color: #ffffff;
テキストの色を指定します。
font-size: 14px;
テキストの大きさを指定します。
font-weight: bold;
テキストを太字にします。
text-align: center;
テキストをセンタリングします。(左右の軸のセンタリングのみです。)
text-decoration: none;
テキストリンクの下線を消します。
ボタンが沈み込むしかけ
.button a:hover
マウスオーバーしたときの挙動はこちらで指定します。例としてボタンを押した感じを表現しました。マウスを乗せたときのmargin-topを大きくmargin-bottomを小さくすることでボタンが数ピクセル下に移動し、box-shadowのY軸を小さくすることでボタンが沈み込むように見えます。
最後に
ソースはご自由に持って行ってください。
あくまで基本形なのでこのやり方をベースにしていろいろ遊んでみてくださいね。