9つのカスタムCSSおよびJavaScriptソーシャル共有ボタン

公開: 2021-04-18

すべてのサイトには、Webでの共有を増やすために、いくつかのソーシャルボタンを含める必要があります。ただし、デフォルトの共有ボタンはそれほど優れておらず、ネットワークのブランドに基づいてそれぞれ異なるスタイルになっています。

そのため、自分のサイトでフォーマットして再利用できるカスタム共有ボタンのこの小さなコレクションを厳選しました。あなたが美しい共有ボタンを探しているなら、これらのテンプレートは素晴らしい出発点を提供します。

1.サイドシェアリング

最初は、開発者MichaelSchofieldによって作成された私のお気に入りのテクニックの1つです。この固定されたサイドシェアリングソーシャルバッジUIは、大きなブログや雑誌サイトで非常に一般的です。

これらのソーシャルバッジは、見出しの近くの最上部に配置したままにすることも、ユーザーと一緒に下にスクロールすることもできます。違いを比較するケーススタディは見つかりませんでしたが、固定ボタンの方が共有数が多いと思います。いずれにせよ、それらは非常によく設計されているので、レイアウトにスパムやシューホーンのようには見えません。

ブログを運営していて、カスタム共有バッジが必要な場合は、これがおそらく最初に最適なテンプレートです。

2.画像ボタン

もう1つの人気のある共有スタイルは、Webサイトで見つかった画像を再投稿することです。これはPinterestで人気がありますが、FacebookやTwitter、さらにはGoogle+でもうまく機能します。

これらの画像ボタンは、純粋なCSS3とそれぞれにいくつかの背景ロゴを使用したカスタムデザインです。まだソーシャルネットワークに接続していませんが、アンカーリンクはソーシャル共有用に簡単にプログラムできます。

デザインはどんな画像にも驚異的に付着しているように見えるので、ここでは本当に私の焦点です。さらに、場所は、投稿だけでなく、画像自体の共有を促進しようとしているという考えを実際に与えます。

3.共有を切り替えます

小さな共有アイコンとフライアウトメニューを使用して、これらのWordPress共有ウィジェットを見てきました。しばらくすると古くなる可能性があるので、少し混ぜるのが役立ちます。

このスニペットを使用すると、カスタムアニメーションと非表示のメニューを使用してソーシャル共有のスタイルを変更できます。複数のネットワーク間で多くの共有を促進したいサイトを持っている人には最適です。

各アイコンは純粋なCSSで設計されており、アニメーションはjQueryを介して制御されます。これを任意のレイアウトにコピー/貼り付けして、機能させることができるはずです。それは記事の見出しにぴったり合うか、人々が読み終えた後の一番下にさえぴったり合うでしょう。いずれにせよ、それは全面的に社会的シェアを増やすことは確実です。

4.サークルアニメーション

ちょっとした楽しいアニメーションについては、StephaneLyverによって作成されたこれらのサークルボタンをチェックしてください。

各ボタンには独自のホバーからアニメーションへの効果があり、すべてのボタンを任意のレイアウトに完全にブレンドできます。背景とアイコンの色を変更して、真っ白な背景に対して目立つようにすることもできます。

すべてが純粋なCSSで実行され、アイコンはBootstrapを介してFontAwesomeから取得されます。

これらのボタンもソーシャル共有リンクに直接接続していませんが、これは適切なコードで簡単に修正できることに注意してください。

5.シンプルな共有ボタン

短く、甘く、要点を言えば、これらの共有ボタンを最もよく表します。

IoniconsアイコンセットのシンプルなSVGアイコンを使用します。ただし、これらを機能させるためにIonicやJavaScriptは必要ありません。

代わりに、 href値と新しいタブオプションを使用して、ブラウザで共有リンクを開きます。 JavaScriptは必要なく、不格好なSVGも必要ありません。

Ionicアイコンセットを掘り下げると、追加したい他のソーシャルアイコンを見つけることもできます。さらに、CSSのスタイルを完全に制御できるため、サイズ、パディング、フォントの色など、ほとんどすべてを変更できます。

6.隠された社会

開発者のChrisSevillejaは、これらの非表示のソーシャルボタンをすべて純粋なCSSで作成しました。

一部のWebサイトでは、この手法を使用して、デフォルトの共有バッジを小さなアイコンの中に埋め込みます。しかし、確かにこれはユニークなアニメーションであるため、あまり一般的な傾向ではありません。

コードはセットアップが非常に簡単で、すべてCSSを介して実行されるため、完全に制御できます。クリスは、Google +ソーシャルバッジ用の同様のペンも開発しました。

どちらのコードスニペットも、ほとんどすべてのWebサイトに最適であり、アニメーションはすべてのCSS3準拠のブラウザーで実行されます。

7.背景色にカーソルを合わせる

これは、ホバーしたボタンに基づいて背景色が変化する、非常にユニークなソーシャル共有設定です。

各ボタンにはFontAwesomeから取得した独自のカスタムアイコンがあるため、このセットを拡張して他の関連アイコンを含めることもできます。また、ホバーの変更に対するJavaScriptフォールバックがあるため、このアプローチも非常に気に入っています。

しかし、Web開発者のChristopher Grabinskiは、まったく同じように機能する純粋なCSSの代替手段を作成しました（サポートされているブラウザーで）。

この手法は、小さなサイトや短いブログ投稿では機能する可能性がありますが、大きなブログでは見栄えがよくないと思います。

8.フライアウト共有

開発者のKyleLaveryは、マテリアルフライアウトに対するGoogleのアプローチを彷彿とさせる素晴らしいフライアウト共有ボタンを作成しました。

これは少しJavaScriptを使用しますが、5行しかなく、それほど複雑ではありません。アニメーションの魔法はCSSにあり、ニーズに合わせてカスタマイズできます。

また興味深いのは、生のHTMLがめちゃくちゃシンプルなことです。メインの共有コンテナが1つあり、ボタンにdiv要素を使用します。基本的に、5行のHTMLと5行のJavaScriptを、大量のCSSと組み合わせることで、この素敵な効果が得られます。

絶対に私が見た中で最もクールなソーシャル共有機能の1つであり、マテリアルデザインスタイルはそれをさらにクールにします。

9.3D共有ボタン

私のコレクションの最後は、ソーシャルボタンと一緒にCSS3D変換を使用したこの3Dデザインです。

開発者のFabrizioBianchiは、アイコンから変換アニメーションまで、純粋なCSSを使用してこれらのボタンを作成しました。メインアイコンはFontAwesomeのもので、JSコードはボタンを内部に埋め込むためのものだけです。

しかし、全体として、これは純粋なCSSソリューションであり、どのサイトでもうまく機能するはずです。誰もが3D効果を好むわけではありませんが、それがあなたのデザインに合っているなら、それを選んでください。