Open1

(HTML・CSS)Buttonタグのデフォルトスタイルをリセットする方法

ふじしろふじしろ

Buttonタグのちょっといまいちなデザインを初期化したい時は、各プロパティごとにリセットする必要があるということを知れたのでメモ。

参考記事
https://coliss.com/articles/build-websites/operation/work/need-to-know-about-buttons.html

buttonの実装で一番悩ましいのは、buttonのスタイルです。
(中略)
buttonをスタイルするには、行ごとにプロパティをリセットする必要があります。

/* ✅ */
button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}

このCSSでdivのように見えて動作するbuttonができます。さらに、ブラウザのデフォルトのフォーカススタイルも使用できるという利点もあります。