inputボタン(submit)をCSS又は背景で変える時のコードまとめ。

フォームを作るときに必ず必要になってくるのがsubmitボタン。
最後に送信と確認とかになるあれです、あれ。

何もいじらずのデフォルトがこちら。


しかしこれだと味気ないですよね。そんな時に変える方法としてはCSS使うか、HTMLのタグ自体を変える方法があります。
備忘録としてもinputボタンを変えるときはどんな方法があるかを振り返ってみました。

CSSで変える場合

まずは一番簡単なCSSで変える場合。submitに対してCSSを適用させられればデフォルトボタンが簡単に違うデザインにすることができます。

イメージ例：


HTML側

CSS側

.sbt_1{

	width:100%;

	height:40px;

	background-color:#e83f22;

	border:none;

	color:#fff;

	font-size:13px;

	font-weight:700;

	text-align:center;

	

}

.sbt_1:hover{

	background-color:#761c0c !important;

	color:#fff;

}

hoverも指定しておくことでボタンに触った瞬間に「ボタンだっ！」という挙動にすることができます。
こういったCSSは下記のサイトでボタンごとにまとめられていたり、ジェネレーターで自分の好きなボタンを作ってCSSをコピペでも可能。

・CSS Button Generator
・CSS Drive CSS3 Button Generator
・CSS Button Generator

submitボタンをCSSではなく画像にしたい場合

続いてCSSではなくて、画像で表現したい場合。
この時はsubmitに対してCSSで背景を指定するかtypeでimageを使うかのどちらかで表現します。
ここでは背景画像を指定する場合の方法を書いておきます。

こちらがCSSで背景を指定した場合。
CSSに比べると
・デザインが自由
・フォントが自由
というメリットがあり、逆にサイズがちょいと重くなるというデメリットも。


HTML側

CSS側

.sbt_2,.sbt_2:hover{

	border:none;

	width:100px;

	height:40px;

	background-image:url(画像URL);

}

.sbt_2:hover{

	background-image:url(hover時の画像URL);

}

imageでの指定でもいいですが、臨機応援に使いたい方を使えばいいかなと思います。

画像であれば、ブラウザごとの挙動も気にする必要がなくて手軽でもありますし。
ではでは。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。