<button>のデフォルトのうざい変なグレイのデザインを消し去る方法

buttonの変なグレイの正体

buttonのレイアウトは、ブラウザ毎に、デフォルトでボタンっぽいレイアウトを付与する設定がされています。

消す方法

cssでデフォルトの挙動を消し去るように上書きします。

button {
  /* 下の二つのプロパティーが button だと変なグレイがつくので、noneに上書き。 */
  -moz-appearance: none;  /* Geko (firefox) */
  -webkit-appearance: none; /* Chrome*/
}

例

<button style="-webkit-appearance: none">-web-kit-appearance: none</button>
<button style="-webkit-appearance: button">-web-kit-appearance: button</button>

結果