画像のbutton要素を作る方法を解説!

画像のbutton要素を作る方法を解説します。画像のbutton要素を作ることで、ユーザーにより押してもらえるbuttonとすることができます。ではサンプルコードを踏まえて見ていきましょう。

コンテンツ [表示]

  1. 1画像のbutton要素を作りたい
  2. 2画像のbutton要素を作る方法
  3. 2.1サンプルコードの解説
  4. 3まとめ

画像のbutton要素を作りたい

フォームにある送信ボタンなどを画像ボタンとして、ユーザーを惹きつけたいという時があります。

もちろんCSSでもある程度デザインを修正できますが、画像で表示したいときもあるかと思います。

そこで今回は画像のbutton要素を作る方法についてサンプルコード付きで解説します。

Photo byPixelkult

画像のbutton要素を作る方法

画像のbutton要素を作る方法を解説します。

早速ですがサンプルコードで用意したので、実際に挙動を確認してみましょう。

このように画像ボタンとなっていることが分かります。

サンプルコードの解説

まずHTMLでbutton要素を記述し、その中にimg要素で画像を挿入します。
これだけだとボタンから画像がはみ出ているので、CSSで修正します。

まずbutton要素にposition: relative;を設定、そしてimg要素に下記のプロパティを設定することでボタンの中に画像が収まります。

img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

このようにして画像ボタンを作成することができます。

まとめ

いかがでしたでしょうか?

ボタンを画像にすることで、普通のボタンよりもユーザーを惹きつけることができ、さらにどんなボタンなのか押してみたくなる心理が働きます。

WEBサイトを制作する際、ここで紹介した方法を参考にぜひ活用してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次