HTML/CSSにてボタンを作成する場合、下記のような方法があります。
①<a href=”#” class=”btn”>ボタン</a>など単にクラスにbtnなどの名前をつける場合
長所 外見や動作をCSSでカスタマイズしやすい。
短所 セマンティク(意味的な)HTMLとしては最適でない場合がある。
②<button>ボタン</button>などタグをbuttonにする場合
長所 本物のボタンとして動作するため、クリックやフォーカスなどのイベントハンドリ
ングが容易。セマンティクなHTMLである。
短所 デフォルトのボタンスタイルがブラウザによって異なるため、リセットスタイルな
どを適用して追加のCSSを適用しなくてはならない。
③<input type=”submit” value=”送信”>などsubmitを使う場合
長所 formの中で主に使用され、送信ボタンとして動作する
短所 ②より、さらにカスタマイズが難しい。
形はボタンだが、実際はリンクの意味は強く、ページや別のセクションへのナビゲーションで使う場合は①、ボタンとして何らかの操作のトリガーをする場合、(例:モーダルを開く、特定のアクションを実行する等)は②。③はフォーム等のデータをサーバーに送信する役割を持ちます。②と③は併用するときがあります。
CSSのカスタマイズの問題はあるものの、セマンティックを優先したほうが良さそうです。