9 個自定義 CSS 和 JavaScript 社交分享按鈕

已發表: 2021-04-18

每個網站都應該包含一些社交按鈕，以增加網絡上的共享。但是默認的共享按鈕並不是那麼好，並且它們的樣式根據網絡的品牌而有所不同。

這就是為什麼我們策劃了這個小集合的自定義共享按鈕，您可以在自己的網站上格式化和重複使用。如果您正在尋找漂亮的共享按鈕，這些模板提供了一個很好的起點。

1. 側面分享

首先是開發人員 Michael Schofield 創建的我最喜歡的技術之一。這種固定的側面共享社交徽章 UI 在大型博客和雜誌網站上非常常見。

這些社交徽章可以保持在標題附近的最頂部，也可以隨著用戶向下滾動。我還沒有找到任何比較差異的案例研究，但我想固定按鈕確實看到更高的共享計數。無論哪種方式，它們的設計都非常好，以至於它們看起來不像垃圾郵件或被硬塞到佈局中。

如果您運行博客並想要一些自定義共享徽章，這可能是最好的模板。

另一種流行的分享方式是重新發佈在網站上找到的圖片。這在 Pinterest 中很受歡迎，但也適用於 Facebook 和 Twitter，甚至 Google+。

這些圖像按鈕是使用純 CSS3 和一些背景徽標的自定義設計。他們還沒有連接到任何社交網絡，但錨鏈接可以很容易地被編程為社交分享。

設計真的是我在這裡的重點，因為它們看起來非常適合任何圖像。此外，該位置確實讓人覺得您試圖鼓勵分享圖像本身，而不僅僅是帖子。

我們都見過那些使用小共享圖標和彈出菜單的 WordPress 共享小部件。一段時間後，它們可能會變得陳舊，因此將其混合一下會有所幫助。

使用此代碼段，您可以使用自定義動畫和隱藏菜單重新設計您的社交分享。對於希望鼓勵跨多個網絡進行大量共享的網站的任何人來說，它都是完美的選擇。

每個圖標都是用純 CSS 設計的，動畫是通過 jQuery 控制的。您應該能夠將其複制/粘貼到任何佈局中並使其正常工作。它非常適合緊挨文章標題，甚至在人們閱讀完後放在底部。無論哪種方式，它肯定會全面增加社會份額。

要獲得一些有趣的動畫，請查看 Stephane Lyver 創建的這些圓形按鈕。

每個按鈕都有自己的懸停動畫效果，它們都可以完美地融入任何佈局。您甚至可以更改背景和圖標顏色，使它們在純白色背景中脫穎而出。

整個事情在純 CSS 上運行，圖標是通過 Bootstrap 從 Font Awesome 中提取的。

請注意，這些按鈕也不會直接連接到社交共享鏈接，但可以使用正確的代碼輕鬆修復。

簡短、甜美且最準確地描述了這些共享按鈕。

他們使用 Ionicons 圖標集中的簡單 SVG 圖標。但是你不需要 Ionic 或任何 JavaScript 來讓這些工作。

相反，他們使用href值和新選項卡選項在瀏覽器中打開共享鏈接。不需要 JavaScript，不需要笨重的 SVG。

如果您深入研究 Ionic 圖標集，您甚至可以找到您可能想要添加的其他社交圖標。此外，您可以完全控制 CSS 中的樣式，因此您可以更改大小、填充、字體顏色以及幾乎所有其他內容。

開發人員 Chris Sevilleja 使用純 CSS 創建了這些隱藏的社交按鈕。

一些網站使用這種技術將默認共享徽章嵌入到較小的圖標中。但不可否認，這是一個獨特的動畫，所以它不是一個超級普遍的趨勢。

該代碼非常易於設置，並且全部通過 CSS 運行，因此您可以完全控制。克里斯甚至為 Google+ 社交徽章開發了類似的筆。

這兩個代碼片段對於幾乎任何網站都非常有用，並且動畫可以在所有兼容 CSS3 的瀏覽器中運行。

現在這是一個非常獨特的社交共享設置，其中背景顏色會根據您懸停的按鈕而變化。

每個按鈕都有從 Font Awesome 中提取的自己的自定義圖標，因此您甚至可以擴展此集以包含其他相關圖標。我也非常喜歡這種方法，因為它確實具有用於懸停更改的 JavaScript 後備。

但是 Web 開發人員 Christopher Grabinski 創建了一個完全一樣的純 CSS 替代方案（在支持的瀏覽器中）。

我認為這種技術在較大的博客上看起來不太好，儘管它可能適用於較小的網站或簡短的博客文章。

開發人員 Kyle Lavery 構建了一個令人驚嘆的彈出式共享按鈕，讓人想起 Google 的材質彈出式方法。

這確實使用了一點 JavaScript，但它只有 5 行並且不是很複雜。動畫魔法在 CSS 中，您可以根據自己的需要進行自定義。

有趣的是原始 HTML 非常簡單。它有一個主要的共享容器，然後使用div元素作為按鈕。基本上是 5 行 HTML 和 5 行 JavaScript，再加上一大堆 CSS，給你這個可愛的效果。

絕對是我見過的最酷的社交分享功能之一，而材料設計風格讓它更酷。

我收藏的最後一個是這個使用 CSS 3D 轉換和社交按鈕的 3D 設計。

開發人員 Fabrizio Bianchi 使用純 CSS 從圖標到變換動畫創建了這些按鈕。主要圖標來自 Font Awesome，唯一的 JS 代碼用於將按鈕嵌入其中。

但總的來說，這是一個純 CSS 解決方案，應該適用於任何網站。不是每個人都喜歡 3D 效果，但如果它適合您的設計，那就去吧。