HTMLを書いていてよく使うボタン要素だけど、ブラウザのスタイルがダサすぎるので一回リセットしとこ!
button{ padding: 0; border: none; outline: none; appearance: none; background: none; cursor: pointer; }
んじゃあ、ブラウザ固有のスタイルとリセットしたボタンスタイルを比較してみよう。
ブラウザのスタイル
リセットしたボタンスタイル
このリセットのいい所は、「:focus」のスタイルもリセットされる所で、邪魔なスタイルを全部取ってくれる所だね!
以上でボタンのスタイルをリセットする方法を終わります!
コメント