マウスホバー時にプルプルとアイコンが動くとなんか心地いいですよね?
そんな心地いいボタンアイコンを作ってみました。
以下よりアイコンとアニメーションの設定、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 Animation
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css" />
その他の設定
その他アイコンやHTML・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;
}

上記赤枠の「a.btn-icon-animation」クラスは各ボタンの共通クラスです。共通クラス設定後は背景色を設定するための「a.btn-share-[番号]」クラスのみコピーしてください。
以上がホバー時にアニメーションが設定できるツールの解説でした。
お気に入りのアニメーションを設定して楽しんでみてください。
最後まで読んでいただきありがとうございました。
コメントを残す