ボタンのアイコンを:hoverで切り替える (HTML/CSS)

hoverで背景色が変わるボタンに、アイコンを指定した。

完成形

内容

ここを参考に、buttonタグの先頭に画像を設定した。contentだとサイズを指定できなかった。

stackoverflow.com

• HTML

<button class="btn">button with icon</button>

• CSS

/* 通常は、濃い背景色に白文字 */
.btn{
    color: white;
    background: gray;
    border: 2px solid gray;
}
/* hover時に白背景に濃い文字色 */
.btn:hover{
    color: gray;
    background: white;
    border: 2px solid white;
}

/* :beforeで文字の前に画像を表示する */
.btn:before{
  /* 画像サイズ */
  width: 32px;
  height: 32px;
  /* 画像とボタン文字列の間隔 */
  margin-right: 5px;
  /* 背景透過の白いアイコン画像 */
  background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/peccu/20151109/20151109142541.png') no-repeat 0 0;

  /* 背景画像のサイズを最大 */
  background-size: 100%;
  /* 上下方向の中心に置く */
  vertical-align: middle;
  /* 行内のブロック要素とする */
  display: inline-block;
  /* :beforeで表示する内容は空(背景画像として表示するため) */
  content: "";
}
/* :before:hoverではうまくいかなかった */
/* .btn:hoverにも:beforeで文字の前に画像を表示する */
.btn:hover:before{
  /* 同じサイズ */
  width: 32px;
  height: 32px;
  margin-right: 5px;
  /* 背景透過で濃い色のアイコン画像 */
  background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/p/peccu/20151109/20151109142540.png') no-repeat 0 0;
  background-size: 100%;
  vertical-align:middle;
  display: inline-block;
  content: "";
}