サブミットボタンを画像にしたいという要望はかなり多いんです。
確かにサブミットボタンってそのまま使うと普通すぎてつまらないですよね。
今では画像を使わずにCSSだけでも綺麗に作る事ができるのですが、それはまた別の機会にという事で。

今回はサブミットボタンを画像にする工程で少し気になる部分も含めてまとめていきたいと思います。

まずはサブミットボタンを普通に表示する

まぁ、今更書く必要もないのですが、サブミットボタンを普通に表示してみます。

html

css

こんな感じですね。
まぁ、こざっぱりしていて普通な感じです。
見た目はそんなに悪いわけでもないし、一発でボタンと認識しやすいので、
このまま使いたいと思っている人は結構いるんですよ。

ただ、スマートフォンならともかく、PCやタブレットなどの端末では、小さすぎて目立たないかもしれないですね。

サブミットボタンを画像にする

自由なデザインをしたいと思った時に、手っ取り早いのは画像にしてしまう事かと思います。
そこで、サブミットボタンを画像にしてみました。

html

css

こんな感じでしょうか。
borderを消して、横幅と高さを画像に合わせます。そしてbackgroundに画像を指定します。

マウスオーバーをした時の動作を指定する

サブミットボタンを画像にすると、ちょっと気になる点が出てきます。

こんな所でしょうか。
今回の画像は明らかにボタンっぽいので、画像がクリックできるのかがわからないって事もないのですが、
ボタンっぽくないデザインの時もあるので、画像にアクションがあった方がいいですよね？

では、一つ一つクリアーにしていきます。

マウスオーバーした時にポインターを指マークにする

html

css

こんな感じですね。
これでマウスオーバーした時にポインターが指マークになりました。

マウスオーバーした時、画像に効果を与える

html

css

画像に効果を与えてみました。
ここでは、画像を透過させています。

画像を透過させるだけではなく、まったく別の画像にする事もできます。
そのあたりは別の機会にという事で。

サブミットボタンをCSSで画像ボタンに変更する　まとめ

サブミットボタンの見た目を変更する事は、実践でもすごく良く使うテクニックですので、覚えておくとすごく役立つと思います。

CSSって色々な事ができてすごく楽しいですよね。