登録フォームの送信ボタンを違うデザインにしたい

質問
登録フォームの送信ボタンのデザインを変えるにはどうすればいいですか?

登録フォームの送信ボタンに画像を使用することで
デザインの変更を行うことが出来ます。

主に2通りのやり方がありますので、
用途に応じて選択してください。

1. 背景画像を利用する

ボタンの背景画像として任意の画像を指定する方法です。

この方法の場合は、通常のボタンと同じく画像とは別に
ボタンに乗せる文言を記載することができます。

登録フォーム内の以下のタグを探し

<input type=”submit” value=”登録する” />

次のように修正します。

<input type=”submit” value=”登録する” style=”background-image: url(‘(使用したい画像のURL)’);” />

これで背景画像を利用した登録ボタンが作成できます。

この方法で作成したボタンは以下のような表示になります。

2. 画像ボタンを利用する

また背景画像ではなく画像そのものをボタンとする方法があります。

この方法の場合は上に文字を置くことができないので、
画像として表示したいボタンのデザインを完成させておく必要があります。

テキストのデザインまで凝りたい場合はこちらのほうがオススメです。

背景画像の場合と同様に登録フォーム内の以下のタグを探し

<input type=”submit” value=”登録する” />

次のように修正します。

<input type=”imagesrc=”(使用したい画像のURL)” alt=”登録する” />

これで画像ボタンを利用した登録ボタンが作成できます。

この方法で作成したボタンは以下のような表示になります。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

サブコンテンツ

このページの先頭へ