按鈕樣式的正確方式

按鈕樣式的正確方式

若是你正在創建一個網站或一個web應用，你可能會用到按鈕，也許看起來像按鈕的連接。無論怎樣，讓這些正常展現是很重要的。

在本教程中，咱們將爲<a>和<button>元素以及一個自定義.btn的CSS組件建立基本樣式。 你會在這個過程的每一步中找到一個演示頁面。

重置<button>樣式

一般，網站或應用程序中可點擊事件的99.9％的元素應該是<a>或<button>元素。 若是您不肯定在給定狀況下使用什麼元素：

1. 若是它轉到其餘網址或更改了網頁的大部份內容，請使用連接（<a href="some_url"> ... </a>）。
2. 不然，請使用通用按鈕（<button type =「button」> ... </ button>）。

使用正確的元素有幾個優勢：它對搜索引擎友好（尤爲是連接！），它適用於鍵盤導航，它提升了全部用戶的可訪問性。

儘管如此，開發人員不多使用<button>元素。 在整個Web上，咱們能夠看到不少觸發JavaScript操做的按鈕，仔細檢查後發現它們是用<div>，<span>或<a>編碼的。

爲何<button>元素如此不受待見？

• 知識點：許多開發人員不知道它（學習100+HTML元素須要一點時間）。
• 樣式上：<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;
}

咱們最終獲得的按鈕是相似普通文本的。

這種方法的缺點是，如今咱們必須對全部按鈕進行樣式設置，不然用戶將沒法識別它們。 另外一個選擇是使用這種風格做爲mixin（使用Sass或其餘預處理器）並選擇性地應用它：

@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組件

如今咱們已經刪除了默認樣式，讓咱們定義咱們本身的按鈕樣式。 這是咱們想要作的事情：

• 可應用於連接或按鈕的「按鈕」樣式;
• 咱們但願有選擇地應用它，由於咱們的頁面中會有其餘連接和按鈕樣式。

這須要一個CSS組件。 CSS組件是一種風格或樣式集合，咱們可使用類來應用，一般在幾種不一樣類型的HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架中的這個概念。

咱們將這個組件稱爲.btn（就像Bootstrap同樣，但咱們只設置顏色和大小，以保持簡單）。

.btn {
  /* default for <button>, but useful for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* invisible border (will be colored on hover/focus) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* size comes from text & padding (no width/height) */
  padding: 0.5em 1em;

  /* make sure colors have enough contrast! */
  color: #ffffff;
  background-color: #9555af;
}

如下是咱們的按鈕組件的外觀：

你可能想知道爲何差異這麼明顯。第二行按鈕看起來就不錯，誰不喜歡柔和的外觀？

懸停(hover)，焦點(focus)和活動(active)樣式

很酷，你的按鈕看起來不錯，可是...用戶將與它進行交互，而且當按鈕的狀態改變時，他們須要視覺反饋。

瀏覽器爲「focus」和「active」（即按下）狀態設置了默認樣式，但經過重置按鈕樣式咱們已經刪除了其中的一些。 咱們還但願爲鼠標懸停設置樣式，整體而言，咱們但願可見的樣式與咱們的設計相匹配。

讓咱們從如下主題開始：活動狀態，即按鈕或者連接被點擊：

/* old-school "down" effect on clic + color tweak */
.btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}

咱們能夠更改按鈕的顏色，但我想爲咱們的鼠標懸停式樣保留這種效果：

/* inverse colors on mouse-over */
.btn:hover {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}

如今讓咱們添加一些焦點樣式。 您的網站或網絡應用程序的用戶可使用鍵盤或虛擬鍵盤（在iOS和Android上）「」並激活表單域，按鈕，連接和其餘交互元素。

• 對於一些用戶來講，它能夠加速緩慢的交互，好比填寫表單。
• 對於其餘人來講，使用鼠標或觸摸指針是不可能的或困難的。 他們依靠使用鍵盤或專用設備訪問網站。

在我見過的大多數Web項目中，設計師都指定了預期的鼠標移過樣式，但未指定焦點樣式。 咱們應該作什麼？ 一個簡單的解決方案是重用：hover風格做爲咱們的focus風格：

/* inverse colors on mouse-over and focus */
.btn:hover,
.btn:focus {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}

一旦你有了這種可見的對焦風格（而不是以前！），你可能想要刪除瀏覽器的按鈕的默認樣式：

.btn {
  /* ... */
  /* all browsers: remove the default outline since
      we are rolling our own focus styles */
  outline: none;
}

/* Firefox: removes the inner border shown on focus */
.btn::-moz-focus-inner {
  border: none;
}

在這裏嘗試一下; 若是您在桌面計算機上，請使用Tab和Shift + Tab鍵在按鈕之間導航：

處理focus樣式

還有一個棘手的問題。 在多個瀏覽器中，當您單擊連接或按鈕時，將應用兩個僞類：

• :active
• :focus

一旦中止按下鼠標按鈕或觸控板，「active」僞類就會中止應用。 但在某些瀏覽器中，focus樣式會一直保留，直到用戶點擊頁面上的其餘內容爲止。

在個人測試中，受影響的瀏覽器包括Chrome（66），Edge（16）和Firefox（60，僅用於連接）。 Safari（11.1）彷佛更聰明並避免了這個問題。

咱們可使用新的： :focus-visible僞類（草稿規範）來解決此問題。 這個功能尚未徹底指定，但想法是瀏覽器只能在鍵盤或相似鍵盤的交互以後設置： :focus-visible，而不是點擊。

因爲它還沒有被瀏覽器實現，咱們將不得不使用JavaScript實現，好比有些polyfill。 它在整個頁面上運行，而且僅在使用鍵盤時纔將焦點可見的類設置爲接收焦點的元素。

讓咱們改變咱們的樣式來解耦：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);
}

如今，在咱們的頁面中包含focus-visible.js腳本後，它會爲<body>元素添加一個js-focus-visible類。 咱們可使用它來從沒有焦點可見類的焦點元素中移除焦點樣式：

/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
  box-shadow: none;
}

一個更簡單的解決方案是隻爲focus-visible類聲明焦點樣式，但若是polyfill不是活動的（例如，若是咱們的JS未能加載），則會中斷焦點樣式。

關注個人微信公衆號，更多優質文章定時推送