ホバー時にアイコンが動く！様々な種類のCSSアニメーションを簡単に設定しよう

Pocket

マウスホバー時にプルプルとアイコンが動くとなんか心地いいですよね？

そんな心地いいボタンアイコンを作ってみました。

以下よりアイコンとアニメーションの設定、CSSの取得が可能です。

FontAwesomeアイコンを利用したホバー時CSSアニメーション

使い方

アニメーションの設定方法

画面右側のコントローラーより「アニメーションの種類」を選択します。

選択後、ボタンにマウスカーソルを重ねると動きを確認できます。

CDNの設定

「HTML・CSS」タブをクリックし、WordPressの場合は以下のCDNをheadタグ内に、貼り付けて保存してください。

アイコンとホバー時アニメーションは以下のスタイルシートを使用しています。

Fontawesome5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />

FontAwesome

Fontawesome Animation

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css" />

FontawesomeAnimation

その他の設定

その他アイコンやHTML・CSSのコピー方法については以下のリンクを参照してください。

SNSボタンをすぐに作れる！FontAwesome5を使用したCSSボタンメーカー

複数のアイコンを横並びに表示する

上記のように複数のアイコンを横並びに表示するためのHTMLとCSSです。

HTML

<a href="#" class="btn-icon-animation btn-share-64 faa-parent animated-hover">
    <i class="fab fa-twitter faa-ring"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-66 faa-parent animated-hover">
    <i class="fab fa-facebook faa-tada"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-67 faa-parent animated-hover">
    <i class="fab fa-get-pocket faa-flash"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-74 faa-parent animated-hover">
    <i class="fab fa-line faa-wrench"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-72 faa-parent animated-hover">
    <i class="fab fa-pinterest faa-pulse"></i>
</a>

CSS

a.btn-icon-animation {
  display: inline-block;
  text-decoration: none;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin:2px;
  font-size: 25px;
  color:#ffffff;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
}
a.btn-share-64{
  background: #22b8ff;
}
a.btn-share-66{
  background: #4267b2;
}
a.btn-share-67{
  background: #ef3f56;
}
a.btn-share-74{
  background: #41C106;
}
a.btn-share-72{
  background: #BD081C;
}