blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicotです。何気ないボタンでも、アニメーションやホバーエフェクトでちょっと楽しくなったり操作が心地よくなったりすることってありますよね。cssアニメーション」と検索すると、まとめ記事たくさん出てくるのでがいつも参考にさせてもらってます。一方で、SNSボタン・シェアボタンはあまり見かけないなぁと思ったので、今回は個人的に惹かれた素敵なデザインやアニメーションのSNS系ボタンをまとめてみました。使えるシンプルなものから、インスピレーションをもらえるような個性的なものまであるので、ご参考にどうぞ。CodePen.素敵なデザインとhoverエフェクト12種類。サイドバーもあります。CodePen.オーソドックスなhoverエフェクト5種類です。CodePen.影付きアイコンのhoverエフェクト3種類。個人的に影の向きが変わるやつがお気に入り。CodePen.6種類ほど紹介されてます。押せるボタンとハート型いいですね。CodePen.はねるように色が変わるhoverエフェクト。アイコンも拡大されて躍動感があります。CodePen.hoverが気持ちいいSNSボタン。マウスを走らせたくなります。CodePen.ボックス型のhoverエフェクト。CodePen.hover時に他のアイコンが暗くなるのがいいですね。CodePen.js使用のホバーエフェクト。綺麗でついついマウスオーバーしたくなっちゃいます。CodePen.SVG+CSSアニメーション。派手さはないですがラインアニメーションってなんかいいですよね。CodePen.使い所に困りそうですが、ちょっと使ってみたくなります。ライン際にカーソルあてるとずっとぴょんぴょんするの可愛い。CodePen.スライムが産まれてきたような(?)独特なアニメーションです。CodePen.hoverでツールチップが表示されます。オーソドックスなタイプ。CodePen.いろんな方向にツールチップ。CodePen.統一感があってかっこいいタイプのSNSボタンです。CodePen.ボタンクリックで横に勢いよく展開。CodePen.クリックで螺旋状に展開されます。jsはクラスの付け外しのみ。CodePen.こういうボタンは通称なんて言うんだろう。MonacaでいうとspeedDialみたいな動きになります。CodePen.こちらもJSはクラスの付け外しのみ。看板型のボタンがでてきます。CodePen.躍動感のあるアニメーション。クリックが楽しくなる収納型です。CodePen.サイドに固定するタイプのSNSボタンです。SNSごとにフォローやリツイート、等細かいアクションを用意するなら良さそう。CodePen.hoverで左側からにゅっと出てきます。CodePen.アイディアがすごい部門。CSSアニメーションで作られてます。いつどこで使うべきかわからないけど使ってみたいですね。CodePen.アイディアがすごい部門2。「サイト全体のデザインとかUXとか置いといてとりあえず使ってみたい」と思うものがたくさん見つかりました。世のデベロッパーさんたちの発想力に驚きを隠せない(゚ω゚)SNSボタンだけでこれだけ個性が出せるのは面白いですよね。サイト制作の際の参考にしてみてください。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。