◆ button は閉じタグがいるけど childNodes を持てる
  ◆ innerHTML で見た目を css で自由に設定できる
  ◆ ::before, ::after も使える
◆ input は css でカスタマイズするのに限界がある
◆ その他はそこまで気にするほどの違いじゃないと思う

input タグで type を指定したボタンと button タグの違いについです


一番の違いは
button は childNodes を持てて
input は他の input と同じで childNodes を持てないことです

childNodes を持てるということは内側に好きにタグを書けるのだから button のほうが css でカスタマイズしやすくなります
もちろん ::before, ::after が使えるのも button だけになります


また button は type 設定しないと type="submit" がデフォルトになっています
見た目はボタンだけど押すとフォームが送信されてしまうのでただのボタンにしたいなら type="button" を指定する必要があります

type を揃えてしまえば動きは一緒です

type を submit にして POST する場合の違いでは
button の場合はボタン名を childNodes (innerHTML) で表すことになり 値の value とは別のものを設定できますが input だと value しかないので表示名を POST することになります
表示名という見た目の都合で変わりやすいテキストでサーバサイドの処理を分岐させたくないから button のほうが良いと言ってる人もいます

私としては 押されたボタンをサーバサイドで判断して処理をわけるなら最初から ボタンごとに formaction を設定して POST 先を変えるべきだと思うので あまり気にするほどじゃないと思っています


あと 昔はブラウザごとの違いでもっと色々あったみたいですけど IE11 までかモダンブラウザのみしかサポートしないなら気にしなくていいでしょう


細かい部分を言うと ブラウザのデフォルトがスタイルが違ったりします
混ぜるとスタイルが揃ってないことがあるかもしれません
Chrome (63) でボタン名が空なら input だと横幅小さいだけで縦幅はあるので押しづらいことは特にないのですが button だと縦にも潰れてしまい押しづらいです
ボタン名がいらない動作確認するとき用なら button のほうがいいかもしれません

Chrome の user agent style

優先度的に無効になってるのもありますが全体のコピペそのままです

input で適用されるもの
input:not([type="image" i]), textarea {
box-sizing: border-box;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
input[type="button" i], input[type="submit" i], input[type="reset" i] {
-webkit-appearance: push-button;
user-select: none;
white-space: pre;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}


button で適用されるもの
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
button {
-webkit-appearance: button;
}