9 款經典華麗的 CSS3 分享按鈕

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

如果你經常活躍在一些社交網站上，那麼你肯定會看到過很多形式各異的分享按鈕，目前由於HTML5和CSS3的普及，很多分享按鈕也都應用了CSS3樣式，甚至會有很多帶有動畫的CSS3分享按鈕。本文就向大家介紹了9款經典華麗的CSS3分享按鈕，以及它們的原始碼，希望能給各位開發者帶來一定的幫助。

1、jQuery/CSS3實現超酷的分享按鈕

今天要分享的這款分享按鈕是基於CSS和jQuery的，按鈕比較大，非常大氣。

線上演示        原始碼下載

2、jQuery互動式分享按鈕 可橫向展開

這次要給大家介紹一款基於jQuery的互動式分享按鈕，它的特點是點選分享即可橫向展開全部社交網站相應的分享按鈕。

線上演示        原始碼下載

3、純CSS3社會化分享按鈕 可固定網頁頂部

這次我依然要分享一款還不錯的純CSS3社會化分享按鈕組合，該按鈕預設可以分享facebook、twitter、youtube等社交網站，也可以自己新增其他的按鈕，非常方便。這款CSS3社會化分享按鈕另一個特點是可以固定在網頁頂部，讓使用者可以更方便的分享網頁內容。

線上演示        原始碼下載

4、CSS3發光社會分享按鈕 超酷CSS3按鈕組合

今天要介紹一款CSS3社會分享按鈕，這款分享按鈕在滑鼠滑過時會產生投影和發光效果，這些特效是由CSS3技術實現的，程式碼非常簡單。而且，按鈕在按下的時候也呈現出3D立體的效果。希望這款CSS3發光社會分享按鈕可以應用在你的網頁分享功能上。

線上演示        原始碼下載

5、CSS3各大網站分享按鈕 帶網站Logo小圖示

今天我又收集了一款非常強大的CSS3各大網站分享按鈕，非常多的按鈕，基本上一些國外的社交網站都有。另外，這款CSS3分享按鈕還帶有社交網站的Logo小圖示，外觀非常漂亮。

線上演示        原始碼下載

6、CSS3多樣式小圖示按鈕 帶分享按鈕

今天我們要來分享一款樣式非常豐富的CSS3按鈕特效，這些按鈕的外觀有點仿谷歌的風格，而且每一個按鈕帶有個性的小圖示。另外按鈕有一個特點，還可以定製出不錯的分享按鈕。之前我們也分享過不少漂亮的CSS3按鈕，大家可以在CSS3按鈕目錄下檢視。

線上演示        原始碼下載

7、純CSS3實現分享按鈕 包含常用社交網站按鈕

前我們有介紹過不少非常實用的分享按鈕，有基於HTML5和CSS3的，也有基於jQuery和CSS的，效果都非常不錯。今天我們再來分享一款純CSS3實現的社會化分享按鈕，這款純CSS3分享按鈕沒有使用圖片，而且包含了基本的常用社交網站的分享按鈕。

線上演示        原始碼下載

8、HTML5/CSS3社會化分享按鈕 圖示和圖文按鈕樣式

次我們要來分享一款基於HTML5和CSS3的社會化分享按鈕，這款分享按鈕外觀樣式非常漂亮，按鈕的色彩也比較華麗自然，這款基於HTML5的分享按鈕提供兩種樣式，一種是圖示式按鈕，另一種則是圖示結合文字的按鈕樣式。這款分享按鈕涵蓋了大部分國外知名的社交網站，一次是一款非常實用的HTML5/CSS3社會化分享按鈕應用。

線上演示        原始碼下載

9、CSS3小圖示分享按鈕 滑鼠滑過按鈕超酷動畫

今天我們要來分享一款非常酷的CSS3小圖示分享按鈕，這款分享按鈕每一個都有不同的顏色，整體看上去外觀既簡單又大方。該分享按鈕有兩組不同的滑鼠滑過動畫效果，一種是文字從左右飛入飛出，還有一種是按鈕文字從上下淡入淡出，很簡單的動畫，但讓整一個CSS3分享按鈕顯得很有動感。

線上演示        原始碼下載

以上這些CSS3分享按鈕你可以應用到自己的部落格中，或許能讓讀者更有衝動去分享你優秀的文章。當然如果你也有不錯的CSS3分享按鈕，也請與我們分享。