Button 的設(shè)計(jì)

 

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

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

　Example: 

Default Inverse Primary Success Info Warning Danger

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

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

  1. 　　:focus - 當(dāng)按鈕獲取焦點(diǎn)（可以是 JS 控制獲取焦點(diǎn)，也可以是用 Tab 鍵一個(gè)一個(gè)切換從而獲得焦點(diǎn)）

  2. 　　:hover - 當(dāng)鼠標(biāo)處于懸停狀態(tài)時(shí)

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

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

  5. 　　:active:focus - 當(dāng)按鈕處于點(diǎn)擊且獲取焦點(diǎn)的情況（這個(gè)情況的反例我也不知道反例應(yīng)該怎么舉）

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

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

    網(wǎng)友評論