今天要分享一款純css3實現的社會化分享按鈕，它放置在網頁的頂部，你可以選擇將它固定在網頁頂部，這樣對使用者分享內容就十分方便。這些社會化分享按鈕的圖示檔案來自google和bootstrap的字型檔案，包含了個大社交**的logo圖示，可以先來看看效果圖：
html結構**
複製**
**如下:
這裡主要是利用了ul li列表結構，麼乙個li都定義了相應的class，比如第乙個定義了class="facebook"，在之後的css中，將會對facebook類進行樣式定義，這樣做會非常方便。
然後再看看css**，也比較簡單：
複製**
**如下:
@import url(
@import url(
先是引入了google和bootstrap的字型檔案，下面可以利用這兩個檔案來渲染按鈕的小圖示。
複製**
**如下:
.social .line
.social ul
.social ul li
.social ul li a
.social ul li a:ho
.fa-facebook, .fa-twitter, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-github, .fa-flickr, .fa-linkedin
上面這段主要定義了整個按鈕控制項的整體外觀，包括每乙個按鈕項的邊距之類的設定。
複製**
**如下:
.social ul li.facebook a:hover
.social ul li.twitter a:hover
.social ul li.codepen a:hover
.social ul li.youtube a:hover
.social ul li.instagram a:hover
.social ul li.pinterest a:hover
.socialdutjt ul li.github a:hover
.social ul li.flickr a:hover
.social ul li.linkedin a:hover
這段**主要是對每乙個按鈕設定滑鼠滑過的背景色設定，每乙個按鈕的背景色都不一樣，這樣顯得色彩斑斕，非常漂亮。
本文標題: css3實現頂部社會化分享按鈕示例
本文位址:
用CSS3來實現社交分享按鈕
以前實現按鈕一般都是用來實現的，特別是一些擁有質感的按鈕，今天練習了一些相關方面的的例子，用css3來實現social media buttons html 如下 複製 如下 css 如下 複製 如下 outset colored outset colored ul outset colored l...
純CSS3冒泡動畫按鈕實現教程
接下來我們來講解一下這款css3氣泡動畫的按鈕實現過程，主要由html 和css 組成。div id buttoncontainer a href big button a a href big button a a href big button a a href big button a a h...
CSS3和jQuery實現網頁頂部進度條
不少網頁頂部都有進度條，有在網頁載入時顯示的，也有在閱讀模式下顯示閱讀進度的。如何用css3和jquery實現網頁頂部進度條？progress progress hover keyframes pulse 100 style 通過 keyframes和animation讓進度條長度從零到100 接下...