CSS hover でアイコンが変わるボタン

ボタンのホバーエフェクトを試行錯誤していたところ、なかなかいい表現かもと思ったので、書きました。

アイコン付きのボタンをホバーすると、アイコンが変わる、というものです。

デモの様子

実際のデモはこちら

使ったアイコン

• Material Icons

CodePen 用に CDN 経由で使えるものを選択しただけなので、もちろん他でも です。

ポイント

• ボタン要素の ::after にアイコンを指定

a.button-with-icons::after {
  font-family: 'Material Icons';
  content: '\e038';
  /* 中略 */
}

• ボタン要素の :hover の ::after にもアイコンを指定

a.button-with-icons:hover::after {
  font-family: 'Material Icons';
  content: '\e87d';
}

デモで書いたコードは こちら です。