フォームパーツのcssは初期値だらけ～第一回 button～

主なフォームパーツの要素は以下です。

そしてこれらは、borderや文字色、背景色などが各ブラウザによって予め実装されています。
各ブラウザで見え方が違うのはそのためです。

これらもともとのデザインを採用してもいいのですが、昨今のオシャレなサイトの増殖に合わせてフォームパーツもデザインされカスタム化されることが多くなりました。

buttonはborderと背景色がついていてなかなかださいです。
そのため最近ではデフォルトのボタンを見ることはありませんね。
以下のようにリセットしてあげてください。

See the Pen XKqbWV by funclur (@funclur) on CodePen.

また、逆にbodyで文字色を指定しても、buttonの文字色は変わらないことに注目してください。
厄介なやつです。

color: inheritもしくは任意の文字色をしていすることで、適応されます。