在2014年的雙11即将來臨之季，愛程式設計小編為大家整理10款純css3實作的按鈕。希望這對堅守在前端的碼農們有所幫助。親，如果你有好的資源也可在本文留言，讓從事編碼的程式員們抱團。工作更輕松。
No1.一款基于css3非常實用的滑鼠懸停特效
這款特效，當滑鼠經過時候一個半透明的遮罩層倒下來。效果很好，而且是純css3實作的，代碼很少，非常實用。 效果如下：
線上預覽 源碼下載下傳
No2.一款基于css3的簡單的滑鼠懸停按鈕
這款懸停按鈕滑鼠經過前邊框是間斷的。當滑鼠經過的時候邊框間隔消失。效果圖如下：
線上預覽 源碼下載下傳
No3.純css3實作的3D按鈕
今天要再給大家帶來一款純css3實作的3D按鈕。在執行個體中給出了五種顔色的3D按鈕。效果圖如下：
線上預覽 源碼下載下傳
No4.一款純css3實作的翻轉按鈕
之前為大家介紹了好多純css3實作的很漂亮的按鈕。今天小編要給各網友再分享一款純css3實作的翻轉按鈕。實作中給出了兩種的翻轉特效，一種是基于按扭的左邊緣為中心線，另一種是基于按鈕的中間為中心線。我們一起看下效果圖：
線上預覽 源碼下載下傳
No5.css3實作的滑鼠經過按鈕特效
今天要為各網友再帶來一款css實作的滑鼠經過按鈕的特效。按鈕初始時，邊框為斷開的按鈕，當滑鼠經過按鈕時動畫變為封閉的邊框。效果圖如下：
線上預覽 源碼下載下傳
No6.CSS3 Transitions屬性打造動畫的下載下傳按鈕特效
一個網站的下載下傳按鈕應盡量吸引讀者的注意。 這意味着網頁設計師應該非常重視檔案的下載下傳界面。一個頁面這麼多的檔案，如圖檔，視訊和插件可以通過直接HTTP下載下傳共享。許多免費網站甚至釋出圖示集和PSD檔案供使用者免費下載下傳。在這些元素很多的網頁下載下傳按鈕非常重要。下面就給大家帶來一款動畫的下載下傳按鈕，效果圖如下：
線上預覽 源碼下載下傳
No7.純css3簡單實用的checkbox複選框和radio單選框
昨天為大家分享了一款很炫的checkbox複選框和radio單選框，今天再給大家帶來一款簡單實用的checkbox複選框和radio單選框。界面清淅、舒服。先給大家來張效果圖：
線上預覽 源碼下載下傳
No8.純css3實作的超炫checkbox複選框和radio單選框
之前為大家分享了好多css3實作的按鈕。今天要為大家分享的是純css3實作的checkbox複選框和radio單選框，效果超級炫。先讓我們看看圖吧!
線上預覽 源碼下載下傳
No9.純css3實作的圓形旋轉分享按鈕
之前已經為大家介紹了好幾款css3按鈕，今天要為大家介紹的是一款純css3實作的圓形旋轉分享按鈕。旋轉的角度可以自己調整。在demo中示範了三個角度旋轉。360度，60度，-360度。如圖：
線上預覽 源碼下載下傳
No10.css3實作的4種動畫特效按鈕
今天要給大家介紹的是css3按鈕，裡面包含四種特效的動畫，如下圖：
線上預覽 源碼下載下傳
本文為愛程式設計整理，轉載請注明原文位址：http://www.w2bc.com/Article/10340