buttonタグのデフォルトのスタイルをリセットする【CSS】

マークアップする際、毎回ボタンのデフォルトのスタイルをリセットしますが、たまに忘れてしまい調べるのですが、調べるのがめんどくさい…

自分用備忘録という感じですが、<button>タグのデフォルトのスタイルをリセットするCSSを紹介します。

まずはじめに、何もCSSを当てていない状態ではボタンにデフォルトのスタイルが当たります。

このスタイルはブラウザによって若干違いますが、下記のような感じです。

デフォルトのボタン

このスタイルをリセットするにはCSSファイルに下記のコードをコピペすればOKです。

button {
  padding: 0;
  background-color: transparent;
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

あとはボタンに適宜スタイルを当ててあげて良い感じのボタンに仕上げましょう。