//zxx: 很多效果為CSS3濾鏡實時渲染，因此本文需要在Chrome等現代瀏覽器下瀏覽

一、傳統色值按鈕

傳統按鈕都是通過具體色值進行賦色的，例如下面這些按鈕和其對應的色值（出自 LuLu UI ）：

有如下缺點：

每種按鈕還有不同的 :hover 和 :active 顏色需要額外設置，按鈕CSS代碼量較多，出現顏色也很多；
如果出現新的狀態按鈕，例如今年流行紫色，需要一個紫色按鈕。開發同學需要求助于設計師，因為自己選的紫色的亮度和飽和度往往和現有的按鈕不搭。
實際上，有更簡單的方法按鈕賦色方法，可以規避上面的缺點，就是使用CSS3 filter濾鏡中的 hue-rotate() 色調旋轉濾鏡。

二、色調旋轉濾鏡下的按鈕

實際上，我們只需要寫好一個按鈕樣式，其他各種顏色按鈕都無需再多此一舉寫一大堆CSS代碼。例如，現有藍色主按鈕如下：

下面就是我分分鐘實現的35個其他顏色的按鈕：

Hover并點擊按鈕，大家可以看到，包括 :hover 和 :active 偽類狀態也一起復制過來了。

實現很簡單，就是給已經實現的按鈕增加下面一行CSS即可：

.btn { filter: hue-rotate(60deg); }

對比示意

對比顯真章，已知寫好了一個藍色主按鈕CSS，現在要寫一個紅色按鈕樣式。

首先，色值法和色調法所使用HTML都是一樣的，如下：

但CSS方面的差異則就驚人了，見下表：

可以看到上面CSS代碼量的對比，左邊是你雙十一之前的錢包，右邊是你雙十一之后的錢包，是不是差異驚人的大！

可以看出色調旋轉濾鏡實現按鈕的優點一： 巨省代碼，開發巨快！

前端也會設計

通過旋轉色調，我發現了LuLu UI原本按鈕中設計的諸多不科學的地方。

綠色按鈕太亮了，顏色根本不在一個飽和度范圍內，是個失敗的取舍，這也是為什么在LuLu UI這個項目中，綠色按鈕幾乎沒怎么用的原因，看上去不搭，原來是設計師的鍋！
hover態不同的按鈕設計的不一致，主色按鈕hover是顏色加深，結果紅色按鈕是hover顏色減淡，失敗失敗。
從這個角度講，我們前端要比純靠視覺感受，靠取色工具在色板上點幾個差不多顏色的設計師要更會設計。所以，當我們需要一個新的紫色按鈕的時候，我們自己來就好了，把色調旋轉到紫色一欄，bingo，按鈕完成！如果找設計師幫忙找顏色（包括交互狀態共3色），得，按照我這么多年合作的經驗，飽和度和亮度100%不一致，雖然視覺上好像一致。因為純靠視覺感受取色一定會存在偏差的。