押した感・押しごたえがあるボタンをつくろう（画像編）

クリックしてもらえるようなボタン、思わずクリックしたくなるようなボタンをつくろう！




まずはPhotoshopなどのグラフィックツールで、ボタンを作ります↓↓↓
▶押した感・押しごたえがあるボタン デモはこちら




「通常時のボタン」と「マウスを乗せたときのボタン」の２種類をつくります。

今回はボタンサイズ 200px×50px（+影の高さ10px）で、カラーは#30b2e2、影のカラーが#1a95c3でつくりました。

必要に応じて好きな形にしてください。



これらをそれぞれ、背景透過のpng形式で保存しました。

そうすると、１つは200×60pxの画像、もう１つは200×50pxの２サイズができます。



次にHTML↓↓↓

<a href="#" class="btn"></a>

１行です。ここでは好きなクラス名（もしくはID名）をつけてください。


そしてCSS↓↓↓

.btn {
 background: url(通常時ボタンのパス名) 0 bottom no-repeat;
 display: block;
 width: 200px;
 height: 60px;
}
.btn:hover {
 background: url(マウスを乗せたときボタンのパス名) 0 bottom no-repeat;
}

"background"の位置を下揃えにすることで、ボタンが押された感が出ます。

":hover"という擬似要素を使用しています。
これは、マウスを乗せたときの動作を指定できます。
つまり、マウスを乗せたら背景画像を変えるという意味です。



▶押した感・押しごたえがあるボタン デモはこちら

Written by Creative Flake