英文原文地址 https://fvsch.com/code/styling-buttons/
Styling buttons, the right way！
在本教程中我們將學習完成<a>和<button>的基本樣式並進行css自定義
一 <button>樣式重造
潛規則里，我們99%的點擊事件都是<a>或<button>來承擔的。如果你不清楚如何正確使用標簽的話可以按下面的規矩來：
①如果即將跳轉到其它頁面或大幅修改當前頁面的內容（ajax）就使用(<a href="some_url">…</a>).
②否則就使用(<button type="button">…</button>).
正確的使用標簽有很多好處如①SEO-friendly ②方便鍵盤快捷鍵 ③用戶體驗更好
盡管如此，<button>標簽還是被<div> <span> <a>等標簽在很多情況下替代。
為什么<button>如此不被重用？
①了解程度: 許多開發者對此標簽不了解(學習一下 HTML’s 100+ elements).
②樣式復雜: <button> 自帶復雜的默認樣式,從而想獲得較好的自定義樣式比較困難
謝天謝地，我們可以 通過下面的代碼對<button>進行重塑
/** * Reset button styles. * It takes a bit of work to achieve a neutral look. */ button { padding: 0; border: none; font: inherit; color: inherit; background-color: transparent; /* show a hand cursor on hover; some argue that we should keep the default arrow cursor for buttons */ cursor: pointer; }
完成后<button>標簽顯示如普通文本
button
這種方法的缺點是，現在我們必須在所有的按鈕上設置CSS樣式，否則用戶將無法識別它們（參見：affordance）。
@mixin button-reset { padding: 0; border: none; font: inherit; color: inherit; background-color: transparent; cursor: pointer; } .my-custom-button { @include button-reset; padding: 10px; background-color: skyblue; }
<button type="button"> I use default browser styles </button> <button type="button" class="my-custom-button"> And I’m using custom styles instead </button>
二 自定義<button>css樣式
我們上面已經移除了默認樣式，現在我們來定義自己的button樣式
①“button”樣式可以被用於link或是button
②讓樣式變的可供選擇，畢竟頁面會存在各種各樣的樣式
使用class選擇符 .btn (類似bootstrap中的使用)
.btn { /* 默認為button 但是在<a>上依然有效 */ display: inline-block; text-align: center; text-decoration: none; /* 創造上下間距一定的空間 */ margin: 2px 0; /* border透明 (當鼠標懸停時上色) */ border: solid 1px transparent; border-radius: 4px; /* padding大小與字體大小相關 (no width/height) */ padding: 0.5em 1em; /* 確保字體顏色和背景色有足夠區分度! */ color: #ffffff; background-color: #9555af; }
高對比度！ strong contrast (5.00):
避免如下！ low, inaccessible contrast (2.30):
之所要避免第二種的低對比度圖像
一方面，有的人可能視力有所欠缺；另一方面，即使是視力良好的朋友在陽光下看手機等情況也無法正常閱讀。
可以通過這個網站完成對比度的測試 check your contrast ratios here
三 對button的hover，focus，active狀態進行區分
由於button是一個需要交互的標簽，用戶在對button進行操作時肯定要得到反饋
瀏覽器本身對focus和active有默認的樣式，但是我們的重置取消了這部分樣式；因此我們需要添加一部分css代碼完成這部分的操作，並讓button變化的狀態和我們此前的樣式更搭！
①:active狀態
/* old-school "的button位置下移+ 顏色飽和度增加 */ .btn:active { transform: translateY(1px); filter: saturate(150%); }
②我們可以改變按鈕的顏色，但是我想為懸停時保留這種樣式：
/* 鼠標懸停時顏色反轉 */ .btn:hover { color: #9555af; border-color: currentColor; background-color: white; }
③讓我們增加focus樣式，用戶經常會用鍵盤或是虛擬鍵盤(ios或安卓等)來focus表單，button，links和其他一些交互性組件
一方面：這樣可以加快交互效率
另一方面：對有的人而言，無法使用鼠標，那么就可能依賴鍵盤或是其他工具訪問網站
在絕大多數我見過的項目中，設計師僅僅指定mouse-over樣式而沒有focus樣式，我們應該怎么做呢？
答案：最簡單的方法就是復用hover樣式給focus
/* 復用樣式 */ .btn:hover, .btn:focus { color: #9555af; border-color: currentColor; background-color: white; }
④如果要用到focus樣式，那么就需要移除瀏覽器button默認的樣式（否則當button是focus或active狀態下都會有outline邊框）
.btn { /* ... */ /* all browsers: 移除默認focus樣式 */ outline: none; } /* Firefox: 移除默認focus樣式 */ .btn::-moz-focus-inner { border: none; }
試一試效果,如果有鍵盤可以嘗試用tab和shift+tab進行導航從而觸發focus！
四 :active和:focus同時觸發的問題！！
當我們對button進行點擊時，active和focus偽類同時觸發，在鼠標移開后，active偽類消失，但是focus樣式還在，這種時候我們就需要點擊其他地方才可以消除樣式，很難受！
我們發現，有一種新的偽類:focus-visible pseudo-class (draft specification).
這個特性還沒有完全確定，但是這個想法很好，是指瀏覽器應該只在鍵盤或鍵盤式交互之后出現:focus-visible，而鼠標點擊無效。
但是由於多數瀏覽器還沒有這個新特性，所有需要借助this polyfill.
該JS保證了后相兼容性
在引入該polyfill后
/* 保留鍵盤觸發的focus，取消鼠標觸發的focus */ .js-focus-visible :focus:not(.focus-visible) { outline: none; } /* Optionally: Define a strong focus indicator for keyboard focus. If you choose to skip this step then the browser's default focus indicator will be displayed instead. 這段我不太清楚怎么翻譯，， */ .js-focus-visible .focus-visible { … }
在本項目中首先對hover和focus解耦
/* inverse colors on hover */ .btn:hover { color: #9050AA; border-color: currentColor; background-color: white; } /* make sure we have a visible focus ring */ .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5), 0 0 0 1.5px rgba(255, 105, 180, 0.5); }
然后利用polyfill完成移除多余的鼠標focus效果
/* hide focus style if not from keyboard navigation */ .js-focus-visible .btn:focus:not(.focus-visible) { box-shadow: none; }
完成地址： look at the final code
只有鍵盤交互才會出現的focus樣式！