button要素で画像ボタンを作る

デフォルト状態だとpaddingやborderが設定されていますが、文字だけのボタンはともかく画像ボタンでは不要なケースが多いのでリセットします。

button {
  padding: 0;
  border: none;
  background: transparent;
}

button img {
  display: block;
}

img要素に display: block; しているのは画像の下に空きができるのを防ぐためです。button要素に対して line-height: 0; でも空きは消えますが、代替テキストが表示される場合（画像が読み込まれない場合）のことを考えると好ましくありません。一方でボタン内に画像とテキストを両方含む場合などは改行されてしまうので、別の方法をとる必要があります。

また、 Internet Explorer と Opera はボタンを押下したときに数ピクセル右下に動きます。いかにもボタンを"押した"感がありますが、もし好ましくない場合は :active 疑似クラスを使って無効化します。

button:active,
button img {
  position: relative;
}

• button要素の中身（img要素）にも指定しているのはIE8以下のためです。サポート対象がIE9以上の場合は button:active のみで大丈夫です。

上記のリセットスタイルだけでは、Firefoxのみ依然空きが残ります。

これは ::-moz-focus-inner という疑似要素が設定されているためで、MDNにはこんなことが書いてあります。

ということで、スタイルを追加します。

button::-moz-focus-inner {
  padding: 0;
  border: none;
}

しかし、こうするとキーボード操作でボタンにフォーカスを合わせたときに何の変化も起きないので、ユーザーは今どこにフォーカスがあるのか分からなくなってしまいます。MDNでも念を押すようにアクセシビリティに配慮したスタイリングを心がけて下さい。(developer.mozilla.org) と言っていることですし、何らかのスタイルを当てた方が良いでしょう。例えばアウトラインを出すにはこうします。

button:moz-focusring {
  outline: 1px dotted #000;
}

2017年5月1日追記ここのサンプルは button:focus としていたのですが、 Chrome などではデフォルトで青い実線アウトラインになるところ、この指定によってボタンだけアウトラインのスタイルが変わってしまうため、 Firefox でのみ適用される:-moz-focusring 疑似クラス(developer.mozilla.org) へ変更しました。