formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった。ページ遷移とか機能的な部分は大丈夫なんだけど、デザイン部分が分からなかったのでメモ。

■ソース

<style>
.test{
	border: medium none;
	cursor: pointer;
	background: #fff;
}
.test2{
	border: 2px solid #999;
	cursor: pointer;
	background: #fff;
}
.test3{
	background:url('./submitBtn.png');
	border: medium none;
	cursor: pointer;
	width: 180px;
	height: 36px;
}
</style>

<input type="submit" value="送信"><br /><br />
<input type="submit" value="送信" class="test"><br /><br />
<input type="submit" value="送信" class="test2"><br /><br />
<input type="submit" value="送信" class="test3"><br /><br />

■サンプル

http://sample.taitan916.info/submitCss/

■その他

ボタンの枠みたいな部分はborderで、背景はbackgroudで変更できるらしい。あと画像をつける場合は縦横を指定しとかないと文字数の関係で途切れちゃったりするので注意する。