参考になる素敵なSNS・シェアボタンのアニメーション25選

こんにちは、しばです。
何気ないボタンでも、アニメーションやホバーエフェクトでちょっと楽しくなったり操作が心地よくなったりすることってありますよね。
「ボタン cssアニメーション」と検索すると、まとめ記事たくさん出てくるのでがいつも参考にさせてもらってます。

一方で、SNSボタン・シェアボタンはあまり見かけないなぁと思ったので、今回は個人的に惹かれた素敵なデザインやアニメーションのSNS系ボタンをまとめてみました。

すぐにでも使えるシンプルなものから、インスピレーションをもらえるような個性的なものまであるので、ご参考にどうぞ。

汎用性高めのSNSボタン

See the Pen SN Icon by Jonas Duerto (@jonasduerto) on CodePen.

素敵なデザインとhoverエフェクト12種類。サイドバーもあります。

See the Pen Social Media Icon Transitions by Matthew Roelle (@Mattykins) on CodePen.

オーソドックスなhoverエフェクト5種類です。

See the Pen Animated Social Icons #01 by PetitCodeur (@PetitCodeur) on CodePen.

影付きアイコンのhoverエフェクト3種類。
個人的に影の向きが変わるやつがお気に入り。

See the Pen CSS3 Animated Social Sharing Buttons by Lauren Ashpole (@laurenashpole) on CodePen.

6種類ほど紹介されてます。ぽちっと押せるボタンとハート型いいですね。

See the Pen Social Buttons by Ashley W (@Aj-Apps) on CodePen.

はねるように色が変わるhoverエフェクト。アイコンも拡大されて躍動感があります。

See the Pen Hover Social Widget By Askwithloud by Prince (@Askwithloud) on CodePen.

hoverが気持ちいいSNSボタン。ついマウスを走らせたくなります。

See the Pen 3D Social buttons by Xavier Pinyol (@XavierPinyol) on CodePen.

ボックス型のhoverエフェクト。

See the Pen Clean Social Buttons – FREE by Michael Rossi (@michaelrossi) on CodePen.

hover時に他のアイコンが暗くなるのがいいですね。

See the Pen Animated Social Media Dock by Bryan Chapel (@bryanchapel) on CodePen.

js使用のホバーエフェクト。綺麗でついついマウスオーバーしたくなっちゃいます。

See the Pen Social svg icon hover concept by web-tiki (@web-tiki) on CodePen.

SVG+CSSアニメーション。派手さはないですがラインアニメーションってなんかいいですよね。(ふんわり

See the Pen Social Media icon reveal with transition by Stefan Göllner (@goellner) on CodePen.

使い所に困りそうですが、ちょっと使ってみたくなります。
ライン際にカーソルあてるとずっとぴょんぴょんするの可愛い。

See the Pen Animated gooey social SVG icons (pt 3) by mike foskett (@2kool2) on CodePen.

スライムが産まれてきたような(?)独特なアニメーションです。

See the Pen Social Icons vision 3D by Miguel Cast (@miguelcast) on CodePen.

(((((((‘ω’))))))ﾌﾞﾙﾌﾞﾙﾌﾞﾙﾌﾞﾙ

ツールチップ型SNSボタン

See the Pen Tooltips Over SVG Social Icons by Maciej Leszczyński (@asistapl) on CodePen.

hoverでツールチップが表示されます。オーソドックスなタイプ。

See the Pen Social animated tooltips by Eva Wythien (@evawythien) on CodePen.

いろんな方向にツールチップ。アイコンと色合いが可愛いです(*´ω｀*)

See the Pen Social Buttons with Data- Hover by David Pottrell (@davidpottrell) on CodePen.

統一感があってかっこいいタイプのSNSボタンです。

収納型SNSボタン

See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.

ボタンクリックで横に勢いよく展開。だけでなく、ドラッグするとSNSたちが着いてきます！楽しい！

See the Pen Social Circle by GRAY GHOST (@grayghostvisuals) on CodePen.

クリックで螺旋状に展開されます。jsはクラスの付け外しのみ。

See the Pen Social Share Button by Kyle Lavery (@koenigsegg1) on CodePen.

こういうボタンは通称なんて言うんだろう。。MonacaでいうとspeedDialみたいな動きになります。

See the Pen Dropdown share button by jacmaes (@jacmaes) on CodePen.

こちらもJSはクラスの付け外しのみ。看板型のボタンがでてきます。

See the Pen Social animation by Jérémie Bardon (@J-Animate) on CodePen.

躍動感のあるアニメーション。クリックが楽しくなる収納型です。

固定型SNSボタン(サイドバー)

See the Pen Unfolding Social Menu with CSS3 by JFarrow (@JFarrow) on CodePen.

サイドに固定するタイプのSNSボタンです。
SNSごとにフォローやリツイート、等細かいアクションを用意するなら良さそう。

See the Pen xpwEh by Gian (@gianmichelle) on CodePen.

hoverで左側からにゅっと出てきます。

特殊型SNSボタン

See the Pen Social Icons net animation by Szymon Dziewoński (@SzymonDziewonski) on CodePen.

アイディアがすごい部門。CSSアニメーションで作られてます。
いつどこで使うべきかわからないけど使ってみたいですね。

See the Pen gl particle sns icons. by Kenji Saito (@kenjiSpecial) on CodePen.

アイディアがすごい部門2。最初みたとき「!?」ってなりました(動揺
これも使いたいけどいつ使えばいいんだ…！(°言°)

感想

集めてみて、 「サイト全体のデザインとかUXとか置いといてとりあえず使ってみたい」と思うものがたくさん見つかりました。
世のデベロッパーさんたちの発想力に驚きを隠せない(ﾟωﾟ)

SNSボタンだけでこれだけ個性が出せるのは面白いですよね。
ぜひサイト制作の際の参考にしてみてください。

以上、SNSボタンアイディア集でした！