Button 的設(shè)計
Button 作為基本的 Web 元素，看似簡單，卻需要非常用心的設(shè)計，因為 Button 作為按鈕，是具有多個不同的狀態(tài)，每種狀態(tài)都基本上需要進(jìn)行一些特殊的優(yōu)化設(shè)計，以讓組件更生動美觀。
注：所有的長度單位均采用 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è)計 Button 的樣式，基本按照以下幾個狀態(tài)來設(shè)計：
:focus - 當(dāng)按鈕獲取焦點（可以是 JS 控制獲取焦點，也可以是用 Tab 鍵一個一個切換從而獲得焦點）
:hover - 當(dāng)鼠標(biāo)處于懸停狀態(tài)時
:active - 當(dāng)按鈕處于點擊狀態(tài)時（按下但還沒有放手的情況下）
:active:hover - 當(dāng)按鈕處于點擊，且鼠標(biāo)依然懸停的情況下（比如你按下去，但是鼠標(biāo)還不放手，然后把鼠標(biāo)拖拽著挪開按鈕，此時就會出現(xiàn)這個狀態(tài)的反例）
:active:focus - 當(dāng)按鈕處于點擊且獲取焦點的情況（這個情況的反例我也不知道反例應(yīng)該怎么舉）
正常狀態(tài)，這我就不用解釋了。
.focus - 通過 class 設(shè)置的獲取焦點狀態(tài)<
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式