送信ボタン

input type=”submit”で作る場合

<input type=”submit”>はブラウザ標準のスタイルのままでは横幅や文字サイズなど限られたプロパティしか変更できないが、appearance: noneとすることで通常の要素とほぼ同等のスタイルを適用できるので、背景色・文字色のみのシンプルなボタンであれば問題なく実装できる。
しかし、input要素には疑似要素が使えないため、矢印などのアイコンを付けたい場合はinput要素をdiv要素などで囲んでそちらに疑似要素でアイコンを付けるなど、一工夫が必要になる。
更にボタン内テキストに対してデザイン的に強弱を付けたいといった要望になると、value属性の値を表示するという仕様の関係上、実現できない。

【1行テキスト＋背景色のみ】
<input type="submit" value="入力内容を確認する" class="btn">
【1行テキスト＋背景色のみ＋アイコン】
<div class="btnWrap"><input type="submit" value="入力内容を確認する" class="btn"></div>

buttonで作る場合

button要素の場合は他の要素同様に疑似要素も使えるし、button要素の中をspan要素などのインラインレベルの要素でマークアップすることも可能なので、どのような装飾でも問題なく実装可能。いわばbutton type=”submit”はinput type=”submit”の上位互換と言えるので、システムの都合など特別な理由がない限り、送信ボタンについてはbutton要素を使用する方がおすすめ。
（※button要素のtype属性にはsubmit／reset／buttonの3つの値があるが、type属性を指定しない場合は初期値であるsubmitが選択され、送信ボタンとして機能する）

【1行テキスト＋背景色のみ】
<button class="btn">入力内容を確認する</button>

【1行テキスト＋背景色のみ＋アイコン】
<button class="btn btn02">入力内容を確認する</button>

【1行テキスト＋背景色＋テキスト装飾】
<button class="btn btn03">
  <span class="txt01">入力内容を確認して</span><span class="txt02">送信する</span>
</button>