Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8586

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

$
0
0

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

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

デモの様子

hover_effected_btn.gif

実際のデモはこちら

使ったアイコン

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

ポイント

  • ボタン要素の ::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';}

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


Viewing all articles
Browse latest Browse all 8586

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>