どうも、コウイチです。
今回は、cssのみを使って、画像をボタンとして使う方法を解説したいと思います。
ボタン風の素材、そのままだと押した感じがしない・・・
ボタン風の素材をそのまま使うと、当然ですが押しても普通のボタンみたいに凹んだりしてくれません。
ホバーしても変化がないので、ただの画像だと思って押されない危険性もあります。
今回は、短いcssで簡単に「押した感」を出す画像ボタンの作り方をご紹介します。
どうやって「押した感」を出すか？
以下のようにして「押した感」を出してみました。とてもシンプルです。
- 画像をホバーしたときに画像を少し薄くし、リンクをホバーしたときと同じカーソルに変える。
- 画像をクリックしたときに、へこませる演出を行う。
以上です。
それではデモをどうぞ
１、普通に画像を表示しただけ
マウスを載せてもカーソルも色も変化しません。これでは無意識に、ただの画像だと思い、押されない可能性が大いにありますね。
２、押した感を出してみた
画像を押す前からカーソルが変わります。これはリンクをホバーしたときのカーソルと同じものを使っているので、普通のユーザーなら「これは押せそうだ」と無意識に考えるでしょう。地味ですがカーソルの変化は重要です。
また、画像の透明度を変化させることで、画像を薄く見せています。こちらも「押せそうだ」という感覚を刺激するので、ホバーによる見た目の変化はあった方がよいです。
そして、クリックした瞬間、画像を若干下に移動させることで、「凹ませる」演出をしています。
↓（ポチッとな）
ソース
それではソースを掲載します。
htmlでimgタグにクラス名を指定し、そのクラスをcssで装飾するだけです。
<img src="twitter.png" class="twitter_button" ontouchstart="">
/* twitter画像をホバーした */
img.twitter_button:hover{
/* 透明度を上げることで、画像の色を薄く見せる。*/
opacity:0.5;
/* リンクをホバーしたときのカーソルにする。*/
cursor: pointer;
}
/* twitter画像をクリックした瞬間 */
img.twitter_button:active{
/* 要素を若干下に下げることで、押した感じを出す。*/
/* 今いる位置から相対的に3px下に配置する。*/
position: relative;
top: 3px;
}
スマホからのアクセスを想定している場合は、imgタグに ontouchstart="" を指定しましょう。そうしないとスマホで:hoverや:activeが効きません。また、これを指定した際、スマホでは:hoverは「次に何か違う要素が選択されるまで」となるようです。
参考
タッチデバイスでCSSの:activeや:hoverを機能させる。
まとめ
今回はcssだけで簡単にできる、画像ボタンの作り方を解説しました。
最近はフラットデザインが流行っていますし、派手な装飾を施さなくてもシンプルな効果で十分、ボタンとしての機能を果たせるでしょう。
画像の素材を使ってボタンを作る参考にしてください。
ではまた。
コメント