Button 的設(shè)計

 

Button 作為基本的 Web 元素，看似簡單，卻需要非常用心的設(shè)計，因為 Button 作為按鈕，是具有多個不同的狀態(tài)，每種狀態(tài)都基本上需要進行一些特殊的優(yōu)化設(shè)計，以讓組件更生動美觀。

注：所有的長度單位均采用 rem 而非 px，需要在 html 標簽下設(shè)定 font-size 的 CSS 樣式，一般我都是設(shè)置：font-size:12px，1440 x 900 的分辨率，如果分辨率更高的話，可以自己調(diào)整。當然你改寫成 px 作為度量衡也是 OK 的。

　Example: 

Default Inverse Primary Success Info Warning Danger

　Button的幾種狀態(tài)：

　　我們設(shè)計 Button 的樣式，基本按照以下幾個狀態(tài)來設(shè)計：

  1. 　　:focus - 當按鈕獲取焦點（可以是 JS 控制獲取焦點，也可以是用 Tab 鍵一個一個切換從而獲得焦點）

  2. 　　:hover - 當鼠標處于懸停狀態(tài)時

  3. 　　:active - 當按鈕處于點擊狀態(tài)時（按下但還沒有放手的情況下）

  4. 　　:active:hover - 當按鈕處于點擊，且鼠標依然懸停的情況下（比如你按下去，但是鼠標還不放手，然后把鼠標拖拽著挪開按鈕，此時就會出現(xiàn)這個狀態(tài)的反例）

  5. 　　:active:focus - 當按鈕處于點擊且獲取焦點的情況（這個情況的反例我也不知道反例應該怎么舉）

  6. 　　正常狀態(tài)，這我就不用解釋了。

  7. 　　.focus - 通過 class 設(shè)置的獲取焦點狀態(tài)<

    網(wǎng)友評論