我們在網頁UI設計時，創建按鈕是不可缺少的一個部分，一些人為了漂亮美觀而采用圖片按鈕，但是那樣的維護成本比較大，所以大多數網頁設計師都不再采用圖片按鈕，而是使用純代碼實現的按鈕。本文將介紹純CSS3實現的保存(save)、下載(download)按鈕4種樣式，這是非常常見和常用的功能按鈕。

1、非中空處理（save按鈕）

該按鈕沒有邊框，按鈕可自定義不同顏色，圓角設計。

demodownload

 2、中空處理（save按鈕）

該按鈕有邊框，按鈕內部無顏色。

demodownload

 3、圖標處理（Download按鈕）

該按鈕使用了一個圖標，該圖標是用svg代碼來實現，不是圖片，方便代碼遷移使用。

demodownload

 4、禁用處理

按鈕禁用的樣式，分為中空和非中空兩種。

demodownload

總結

本文介紹了純CSS3實現的保存(save)、下載(download)按鈕4種樣式，這是非常常見和常用的功能按鈕。當然，“Save”和“Download”是可以在html代碼里輕松修改成任何文字的。

相關文章

• 純CSS：鼠標移上后，鏈接按鈕顏色顯示漸變效果
• 4款CSS 3D按鈕點擊過渡效果
• 6個CSS按鈕邊框過渡動畫效果
• 簡單又好看的CSS單選按鈕(radio)樣式
• 30個漂亮的CSS漸變按鈕，鼠標滑過(hover)動畫效果
• CSS3顏色漸變按鈕 鼠標劃過變色
• 【8個實例】純CSS按鈕(button)，簡單漂亮實用
• CSS懸停效果按鈕一簡單實例（鼠標移到按鈕上變成其他顏色）
• 很好看的css3動畫按鈕鼠標懸停效果【2個實例】
• 漂亮懸停效果的CSS3動畫按鈕【5個實例代碼】
• 漂亮的偽元素CSS按鈕5個實例代碼
• 20個純CSS3實現的彩色透明水晶按鈕

標簽: button