文中我們對CSS超炫加載動畫設計、實現與實例進行了講解與說明，通過學習可知使用CSS提供的animation屬性及偽元素等可以實現精美的CSS動畫效果的設計與開發。本文我們將繼續介紹CSS在Web頁面元素設計中的應用。

按鈕開關設計要求及效果

本例我們使用CSS完成開關的設計，主要要求是在點擊開關時開關標識顏色需要改變，另外需要體現出元素點擊前與點擊后的動態變化與立體效果。本例最終設計呈現效果描述如下圖所示：

設計思路與語法說明

要實現如上圖所示的開關按鈕效果，需要針對元素改變鼠標點擊前后的CSS樣式，因為只使用CSS實現，我們選擇本身具有點擊屬性的INPUT元素。因此還需要考慮對INPUT元素外觀進行設置，其設置也主要是依托于CSS選擇器及相關屬性的設置。

另一方面本例中出現的開關標志，主要使用第三方字體庫提供的圖標實現，因此需要對font相關屬性及CSS外部link方法有所學習掌握。本例所使用字體如下所示：

在明確基本思路之后，我們可以使用submine進行代碼編寫，主要編寫步驟如下：

1、鏈接字體樣式

本例使用如上圖所示提供的on圖標，即Font Awesome圖標字體庫和CSS框架，因此需要外部鏈接或者下載相應CSS文件，這里我們選擇外部鏈接，通過使用CSS提供的link，實現代碼如下：

鏈接完成之后我們在設置字體時可直接使用FontAwesome字體，其中on圖標對應的編碼為f011。

2、定義頁面內容

本例頁面內容主要使用input元素checkbox屬性進行按鈕設置。因此頁面內容部分定義如下所示：

3、定義checkbox樣式

在完成頁面元素添加之后就需要對頁面元素進行CSS樣式的設置，本例通過元素加type屬性作為選擇器，選擇指定元素并進行樣式設置。代碼如下：

checkbox屬性設置描述如上圖所示，設置效果如下：

4、input添加checked、after等樣式

為進一步實現點擊效果切換及圖標按鈕的效果，需要對check狀態及after偽元素進行CSS樣式的設置。其中after為元素主要用于在上圖中添加on開關圖標。實現代碼描述如下：

after偽元素選擇器及樣式設置如上圖所示，主要完成content內容即on圖標設置，字體選擇、字體顏色及字體大小設置，設置完成預覽效果如下：

要實現點擊效果就需要在點擊之后對input元素樣式進行設置，因此我們使用checked作為選擇器對該狀態下input樣式進行設置。設置代碼如下所示：

checked狀態CSS設置如上圖所示，我們只對box-shadow陰影進行設置，通過陰影變化實現按鈕動態效果。

5、點擊之后on圖標顏色變化

點擊之后on圖標顏色變化主要通過對input[type="checkbox"]:checked，進一步使用after偽元素定義字體顏色實現。實現代碼如下所示：

通過使用該選擇器，會在input點擊之后，on字體顏色變為紅色。以上給出了input按鈕效果實現的基本思路與部分核心實現代碼。如需完整案例代碼請關注并私信作者。

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！

輯導語：如何針對具體場景選擇合適的組件，是web表單設計中的常見問題。那么，你知道開關、單選、復選框等組件的適用場景該如何選擇嗎？本篇文章里，作者就該問題做了詳細解答，一起來看一下吧。

在web表單設計中，我們會經常遇到在開關、單選、復選框三個組件的選擇使用上糾結，特別是只有兩種狀態下，比如開啟/關閉、啟用/關閉、顯示/隱藏、同意/不同意、默認/自定義……

我們發現使用Switch開關、Radio單選和Checkbox復選這三個組件好像也都是可以的，這時應該選擇哪個組件更合適呢？

本文主要探討這三個組件的基本特點，以?及在web表單設計中，這三個組件使用上有什么區別，以及常見的場景如何去選擇。

文章概覽

一、Switch 開關?它就像是滅霸的響指

1. 簡要了解開關

開關作為仿照物理開關的映射，提供了兩種最為簡單、直接的對立選項，比如開/關、啟動/禁用等。它就像生活中控制燈泡的開關，點擊燈泡立即亮起。所以它的意符也必須明確，不然用戶都不知道，即將要啟動/關閉什么。

2.開關組件的特點

1. 對象標簽名稱須傳達清晰，能夠讓用戶能夠明確感知操作后的動作開啟或關閉什么；
2. 主體標簽信息和按鈕是分離的，兩個視覺焦點；
3. 一般點擊后會立即反饋；
4. 沒有hovering效果，有動作效果，更適合手指操作；
5. 非W3C組織官方html標記，極端情況不支持 Javascript。

3. 蘋果公司對開關組件的設計規范

蘋果的「Human Interface Guidelines」有著這么一份對于開關組件的使用規范定義，我們不妨可以借鑒。

1) 避免使用開關控制局部細節或者次要的設置。開關的視覺權重比較高，所以用它控制內容較多更為合適，比如可以將它作為總開關打開或關閉一組設置。

2) 通常不要用開關替代復選框。如果我們的規范中定義了復選框，則盡可能保持一致的使用規范。

4. 開關使用場景舉例

通過上述對開關組件特點，結合蘋果組件的規范，我們基本可以梳理出以下幾條主要主要使用場景：

1）開關的標簽意符需傳達清晰

和單選、復選框不一樣的是，因為開關主體的信息和按鈕是分離的。用戶在點擊開關按鈕前，必須清晰告知用戶點擊后會發生什么，甚至有時我們需要通過增加副標題來加以說明。

2）一般只為立即生效的場景使用開關按鈕

在表單填寫時，往往最終會有「提交」按鈕作為結束態，開關作為表單字段的填寫，用戶點擊后并不能夠立即生效，而是需要再次點擊「提交」按鈕。

3）有風險，需著重提醒用戶

開關的視覺權重較高，在復雜的表單信息中，它能夠很快吸引到用戶的注意力，并能夠給用戶以視覺提醒。

4）避免大面積使用開關，使用它控制局部細節或者次要設置

開關在視覺感知上它和按鈕上有些接近，所以盡可能避免在表單中大量使用開關來控制局部層級內容，這時推薦使用復選框來替代開關作為局部。

5）把它作為高層級內容控制或信息設置

把它用來作為總控制來顯示更高層級內容，避免web表單中大面積的使用開關按鈕，會和其他的基本組件造成視覺干擾。這樣可以既凸顯其重要性，又能提升用戶瀏覽表單的效率。

5. 小結

開關按鈕就像是滅霸的戒指，視覺突出且反應快。用戶瀏覽表單、填寫內容組之間，一般不需要很強的視覺差異。如果填寫的表單信息之間對比差異過大，開關往往給用戶造成過大的視覺干擾，反而阻礙用戶瀏覽表單的效率。

二、Checkbox 復選框? 它是一個機器小能手

1. 簡要了解復選框

讓用戶在兩個布爾值之間進行選擇，勾選后和未勾選表示“是/否、要/不要、開啟/關閉…” 等問題。以下內容主要討論單個復選框的使用情況。

2.復選框的特點

1）為了便于用戶快速理解，一般復選框的標簽內容是一句話，不會用逗號去作隔開。

2）作為單選狀態時，操作對象和標簽主體內容視覺焦點是不分開的，選擇后就知道它被選中了。

3）可直接表示標簽內容的開啟、關閉。

3. 場景舉例分析

1) 用戶基本清楚會發生什么，使用復選框

如果使用開關或者單選框，我們會發現視覺干擾特別嚴重，一般表單內容不需要特別去強調每一個字段的開啟狀態。當然如果排版限制，我們也是可以將復選框放到標簽的右側（放右側復選框需對齊）。

2）表單中的復選框生效，需要配合提交按鈕

一般情況下，表單填寫中，復選框不會像開關點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫的表單，更有助于在信息防錯。

（Ps. 在設置頁，復選框可單獨作為設置且立即生效。）復選框的主體標簽信息和復選按鈕在一起，特別是對于批量填寫或設置一批字段，使用復選框效率更高。

3）用復選框來控制表單局部細節

如上述，如果控制對象的功能是表單的一個局部，或信息內容不是很多，用戶也清楚知道選擇后會是什么，這時候復選框更適合。

這時我們不需要過重地給用戶強調什么，用復選框會比使用開關讓整個表單的結構內容更清晰。

4. 小結

復選框就像是一個機器小能手，它的應用拓展性比開關更強，它既可以作為層級內容使用，又可以作為設置項，點擊后并立即生效。

在表單中，作為局部、或者細節內容控制，使用復選框更合適。它也不會像單選按鈕閱讀有信息阻斷的問題，不會像開關有強視覺干擾，它會讓我們的視覺焦點更集中表單信息上。

三、Radio 單選按鈕? 白天不懂夜的黑

1. 簡要了解單選按鈕

單選按鈕最早的設計模型，來源于收音機切換頻道的按鍵，當我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀態。單選按鈕可謂是涇渭分明，有你不能有我。

2. 單選按鈕的特點

單選按鈕的優點是，將所有信息條件暴露給到用戶，它不像開關在使用上帶有去猜測、探索的必要。

1）每個選擇都非常直觀，如果希望用戶閱讀完所有選項，用它再好不過了。

2）拓展性更強，相較于開關、復選框的布爾值，單選能承載兩個或兩個以上選擇。

3）必須提供默認值，且默認值可以承載內容。

3. 場景舉例分析

1）需要讓用戶明確知道兩者的區別，甚至需要強調兩個選項的不同

如果采用復選框，用戶需要在兩個差距較大的選項中去作思考。

2）開啟/關閉的單選狀態，使用復選框

復選框對于絕大多數用戶都是非常清楚，使用復選框在空間、視覺焦點更是更集中的，所以如果只針對開啟/關閉的狀態，推薦使用復選框

3）每個選項都關聯內容時，使用單選按鈕

我們知道，如果默認選項設計的好，會讓很多人保持選擇默認選項。

下圖這個案例，如果采用復選框或者開關，用戶就不得不去探索思考開啟后是什么，還要擔心理解開啟/關閉后帶來的影響，而對于絕大多數用戶來說，這邊的報名設置系統默認內容無需改動。需注意給用戶提供的默認選擇，一定要是安全、方便的選項。

4）較長需隱藏拆分的內容情況，使用單選按鈕

在表單設計中，如果遇到的內容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到表單信息簡潔，也能夠提高用戶的瀏覽效率。

5）垂直排列單選，信息閱讀更佳

如果字段名稱較長，需要添加副標題加以說明，這時單選按鈕承載的信息較多，使用垂直排列讓用戶有一致的起始閱讀線，眼球轉動幅度最小，信息獲取體驗更佳。如果標簽文字較少，也可以橫排不至于占用太多的垂直空間。

4. 小結

單選按鈕就是白天和黑夜，互不干擾的條件，希望用戶閱讀完這兩個選項，使用單選按鈕再好不過了，考慮到單選按鈕提供的默認選項，提供的要是絕大多數用戶需要的，且是安全方便的，如果單選按鈕標簽文字過多，在排版時垂直排列拓展性更強，閱讀體驗更佳。

四、全文總結

1）開關更像是一個滅霸的戒指閃閃發光，不過在表單結構、各種控件內容較多，需要頁面清晰、避免過多的視覺突出，所以盡量避免讓無數個戒指閃亮中表單中。

2）復選框它更像是一個機器小能手，適用和拓展性極強，即可以單獨作為設置，不用配合其他提交按鈕，也可以作為表單填寫的一部分。當我們猶豫使用哪個組件時，選擇它一般不會錯。

3）單選按鈕就像是白天和黑夜，完全不見彼此。單選條件承載的信息也較多，如果希望用戶對比感知到兩者信息的不同，那么使用單選按鈕。

4）最后理論永遠只是指導實踐的一部分，上述內容可能只是在用戶認知和易用性之間，找到一個相對平衡的點，具體的使用場景情況，還是要具體問題具體分析。

參考文獻

Nielsen Norman Group

Human Interface Guidelines

http://www.woshipm.com/pd/374314.html

http://www.woshipm.com/ucd/1267601.html

本文由 @小高雜談 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

天跟大家分享與CSS3按鈕相關的特效展示案例，這些例子特效主要由CSS3編寫出來，除了新鮮有創意之外，編寫代碼質量也很高，對于前端人員或設計師都有參考的價值，當然有的不是全CSS3編寫的，部分是需要與JS代碼結合使用才能發揮效果。

下面大家一起看看這些CSS按鈕DEMO，確實很酷哦！

1.css按鈕點擊效果

2.css按鈕提交動畫

3.css按鈕懸停動畫

4.css訂購按鈕

5.css動畫按鈕

6.css黑白懸停按鈕

7.css藍色動畫按鈕

8.css立方體按鈕

9.css鼠標懸填充效果

10.css鼠標懸停邊框按鈕

11.按鈕懸停效果

12.純css按鈕動畫

13.純css動畫按鈕

14.純css多彩按鈕

15.垃圾桶按鈕動畫

16.文件壓縮按鈕動畫

整理了16款css按鈕，經過全部測試，沒發現有影響使用的bug，其中也可能存在部分bug，但是應該問題不大。

代碼已上傳到網盤，獲取源碼請關注公眾號【青年碼農】回復【css按鈕】即可。