【HTML/CSS】画像をボタンとして使う方法(押した感を出してみる)

プログラミング

どうも、コウイチです。

今回は、cssのみを使って、画像をボタンとして使う方法を解説したいと思います。

ボタン風の素材、そのままだと押した感じがしない・・・

ボタン風の素材をそのまま使うと、当然ですが押しても普通のボタンみたいに凹んだりしてくれません。

ホバーしても変化がないので、ただの画像だと思って押されない危険性もあります。

 

今回は、短いcssで簡単に「押した感」を出す画像ボタンの作り方をご紹介します。

どうやって「押した感」を出すか?

以下のようにして「押した感」を出してみました。とてもシンプルです。

  • 画像をホバーしたときに画像を少し薄くし、リンクをホバーしたときと同じカーソルに変える。
  • 画像をクリックしたときに、へこませる演出を行う。

以上です。

それではデモをどうぞ

1、普通に画像を表示しただけ

マウスを載せてもカーソルも色も変化しません。これでは無意識に、ただの画像だと思い、押されない可能性が大いにありますね。

2、押した感を出してみた

画像を押す前からカーソルが変わります。これはリンクをホバーしたときのカーソルと同じものを使っているので、普通のユーザーなら「これは押せそうだ」と無意識に考えるでしょう。地味ですがカーソルの変化は重要です。

また、画像の透明度を変化させることで、画像を薄く見せています。こちらも「押せそうだ」という感覚を刺激するので、ホバーによる見た目の変化はあった方がよいです。

そして、クリックした瞬間、画像を若干下に移動させることで、「凹ませる」演出をしています。

↓(ポチッとな)

ソース

それではソースを掲載します。

htmlでimgタグにクラス名を指定し、そのクラスをcssで装飾するだけです。

スマホからのアクセスを想定している場合は、imgタグに ontouchstart="" を指定しましょう。そうしないとスマホで:hoverや:activeが効きません。また、これを指定した際、スマホでは:hoverは「次に何か違う要素が選択されるまで」となるようです。

参考
タッチデバイスでCSSの:activeや:hoverを機能させる。

まとめ

今回はcssだけで簡単にできる、画像ボタンの作り方を解説しました。

最近はフラットデザインが流行っていますし、派手な装飾を施さなくてもシンプルな効果で十分、ボタンとしての機能を果たせるでしょう。

画像の素材を使ってボタンを作る参考にしてください。

 

ではまた。

スキルに自信がない20代でも、フリーランスになって月50万以上を稼げます。

最後に僕の実体験から、プログラマーが最も簡単に収入を上げる方法をお伝えします。

それは、フリーランスになることです。

 

エンジニアだったら誰でもフリーランスになれます。

業務経験が1年もあれば、月収50万が狙えます。

 

信じられないかもしれませんが、

フリーランスというのは稼げる働き方なのです。

 

僕は正社員でプログラマーをしていたのですが、

・終電帰りが当たり前
・上司に毎日怒鳴られる。
・手取り16万

という地獄のような環境が耐えられなくなり、

フリーランスになったら月収がいきなり60万になりました。

 

正直僕なんか、大したスキルはありません。

いつも下っ端の下請けプログラマーでした。

 

なのに収入は3倍になりました。

自信と健康とお金を手に入れることができました。

 

いつまでたっても上がらない正社員の給料にイライラしている方は、

是非フリーランスにチャレンジしてください。

 

プログラマーが最速で月収を上げる方法です。

 

・フリーランスなんて不安定じゃん。仕事見つからなかったらどうするの?

・仕事探しがだるい。

・転職活動なんかする暇ないんだよ

・俺のスキルじゃ無理なんだよ

 

僕もそう思ってビビってました。

ですが、思った以上に簡単でした。

 

思い込みというのは本当に恐ろしいです。

やれば行ける世界です。

 

そんな僕がフリーランスになって、

3年間働いても上がらなかった給料を、

一瞬で3倍に上げた方法を、以下の記事で書いています。


【月収20万円⇒月収60万円】価値ナシ貧乏プログラマーの僕が、7日間で収入が3倍になった物語

プログラミング
衣食住よりプログラミング

コメント

タイトルとURLをコピーしました