【譯文】CSS技術：如何正確的塑造button樣式！

英文原文地址 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！　　

Hi, I’m a link And I’m a button

---

 

四 :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樣式！