建立按鈕元件

這份基礎總覽文件說明如何建構可適應色彩、回應式且無障礙的 <button> 元件。

Adam Argyle

在這篇文章中，我想分享我對如何建構可自動調整顏色、具備回應性且無障礙的 <button> 元素的想法。試用示範模式，並查看來源

在淺色和深色主題中，按鈕會透過鍵盤和滑鼠互動。

如果比較喜歡看影片，可以觀看這篇貼文的 YouTube 版本：

總覽

Browser Support

• 1
• 12
• 1
• 1

Source

<button> 元素是專為使用者互動而建構，這項功能會click觸發來自鍵盤、滑鼠、觸控、語音等來源的事件，並根據時間點套用智慧規則。此外，每個瀏覽器都提供一些預設樣式，因此您可以直接使用，無須自訂。使用 color-scheme 也能選擇加入瀏覽器提供的淺色和深色按鈕。

此外，還有不同類型的按鈕，沒有類型的 <button> 會調整為 <form> 內的類型，並變更為提交類型。

<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>

<!-- button state -->
<button disabled></button>

<!-- input buttons -->
<input type="button" />
<input type="file">

在本月的 GUI 挑戰中，每個按鈕都會取得樣式，有助於從視覺上區分其用途。重設按鈕是破壞性操作，因此會顯示警告顏色；提交按鈕會顯示藍色強調文字，比一般按鈕更醒目。

預覽所有按鈕類型的最終組合，顯示在表單中和表單外， 並為圖示按鈕和自訂按鈕提供實用的新增項目

注意： 按鈕一向有各自的運作方式，何不為按鈕設定樣式，以支援其行為？

按鈕也有供 CSS 用於設定樣式的虛擬類別。這些類別提供 CSS 勾點，可自訂按鈕的感覺：:hover (滑鼠懸停在按鈕上時)、:active (滑鼠或鍵盤按下時)，以及 :focus 或 :focus-visible (輔助技術樣式)。

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}

深色主題中所有按鈕類型的最終組合預覽畫面

標記

除了 HTML 規格提供的按鈕類型，我還新增了帶有圖示的按鈕，以及使用自訂類別 btn-custom 的按鈕。

<button>Default</button>
<input type="button" value="<input>"/>
<button>
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="..." />
  </svg>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">

接著，為了進行測試，每個按鈕都會放在表單內。這樣我才能確保預設按鈕的樣式已適當更新，因為預設按鈕的行為與提交按鈕相同。我也將圖示策略從內嵌 SVG 切換為遮罩 SVG，確保兩者都能正常運作。

<form>
  <button>Default</button>
  <input type="button" value="<input>"/>
  <button>Icon <span data-icon="cloud"></span></button>
  <button type="submit">Submit</button>
  <button type="button">Type Button</button>
  <button type="reset">Reset</button>
  <button disabled>Disabled</button>
  <button class="btn-custom btn-large" type="button">Large Custom</button>
  <input type="file">
</form>

此時的組合矩陣相當龐大，按鈕類型、虛擬類別，以及是否位於表單內外，這些因素加總起來，按鈕的組合超過 20 種。幸好 CSS 可以協助我們清楚表達每個狀態！

無障礙設定

按鈕元素本身就具有無障礙功能，但有幾項常見的強化功能。

同時懸停和聚焦

我喜歡將 :hover 和 :focus 與 :is() 功能性虛擬選取器分組。這有助於確保我的介面一律會考量鍵盤和輔助技術樣式。

button:is(:hover, :focus) {
  …
}

試用示範版！

互動式對焦環

我想為鍵盤和輔助技術使用者製作焦點輪廓動畫。我會將輪廓從按鈕動畫移開 5 像素，但只有在按鈕未啟用時才會這樣做。這會產生效果，讓焦點環在按下按鈕時縮回按鈕大小。

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

確保色彩對比度符合規定

淺色和深色至少有四種不同的顏色組合，需要考慮顏色對比：按鈕、提交按鈕、重設按鈕和已停用按鈕。這裡使用 VisBug 同時檢查並顯示所有分數：

向無法看到圖示的使用者隱藏圖示

建立圖示按鈕時，圖示應提供按鈕文字的視覺輔助。這也表示圖示對視障人士沒有價值。所幸，瀏覽器提供隱藏螢幕閱讀器技術項目的方法，因此視障人士不會受到裝飾性按鈕圖片干擾：

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>

Chrome 開發人員工具顯示按鈕的無障礙樹狀結構。 樹狀結構會忽略按鈕圖片，因為 aria-hidden 已設為 true

樣式

在下一個部分中，我會先建立自訂屬性系統，管理按鈕的自適應樣式。有了這些自訂屬性，我就可以開始選取元素並自訂外觀。

自動調整的自訂屬性策略

這個 GUI 挑戰中使用的自訂屬性策略，與建構色彩配置時使用的策略非常相似。如要使用自動調整的淺色和深色色彩系統，請為每個主題定義自訂屬性，並相應命名。接著，使用單一自訂屬性來保留主題的目前值，並指派給 CSS 屬性。之後，單一自訂屬性可以更新為不同的值，然後更新按鈕樣式。

button {
  --_bg-light: white;
  --_bg-dark: black;
  --_bg: var(--_bg-light);

  background-color: var(--_bg);
}

@media (prefers-color-scheme: dark) {
  button {
    --_bg: var(--_bg-dark);
  }
}

注意： 底線慣例來自 Lea Verou 在「具有預設值的自訂屬性」一文中的說明。

我喜歡淺色和深色主題的宣告式和清楚特性。間接和抽象化會卸載至 --_bg 自訂屬性，這個屬性現在是唯一的「反應式」屬性；--_bg-light 和 --_bg-dark 則是靜態屬性。此外，您也可以清楚瞭解淺色主題是預設主題，深色主題只會在特定條件下套用。

準備確保設計一致性

共用選取器

下列選取器用於指定所有類型的按鈕，一開始可能會有點難以理解。:where()，因此自訂按鈕時不需要指定特定項目。按鈕通常會改編用於替代情境，而 :where() 選取器可確保工作輕鬆完成。在 :where() 內，每個按鈕類型都會選取，包括 ::file-selector-button，但無法在 :is() 或 :where() 內使用。

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  …
}

所有自訂屬性都會在這個選取器內設定範圍。請檢查所有自訂屬性！這個按鈕使用了相當多的自訂屬性。我會在說明各個群組時分享深色和減少動態效果的環境，並在章節結尾分享這些環境。

按鈕強調色

提交按鈕和圖示很適合使用亮色：

--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);

按鈕文字顏色

按鈕文字顏色不是白色或黑色，而是 --_accent 使用 hsl() 並保留色調 210 的深色或淺色版本：

--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);

按鈕底色

按鈕背景遵循相同的 hsl() 模式，但淺色主題按鈕除外，這些按鈕會設為白色，因此表面看起來會靠近使用者，或位於其他表面前方：

--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);

按鈕背景井

這個背景顏色用於讓表面顯示在其他表面後方，適用於檔案輸入的背景：

--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);

按鈕邊框間距

按鈕中文字周圍的間距是使用 ch 單位完成，這是相對於字型大小的長度。如果大型按鈕可以簡單地向上推動 font-size，且按鈕比例會相應調整，這就變得至關重要：

--_padding-inline: 1.75ch;
--_padding-block: .75ch;

按鈕邊框

按鈕的邊框半徑會存入自訂屬性，因此檔案輸入內容可以與其他按鈕相符。框線顏色會遵循既有的自適應色彩系統：

--_border-radius: .5ch;

--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);

按鈕懸停醒目提示效果

這些屬性會為互動時的轉場效果建立大小屬性，而醒目顯示顏色則會遵循適應性色彩系統。我們會在本文稍後說明這些項目如何互動，但最終這些項目會用於 box-shadow 效果：

--_highlight-size: 0;

--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);

按鈕文字陰影

每個按鈕都有細微的文字陰影樣式。這有助於將文字置於按鈕頂端，提升可讀性，並增添精緻的呈現效果。

--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);

按鈕圖示

由於相對長度 ch 單位，圖示的大小為兩個字元，這有助於圖示與按鈕文字成比例縮放。圖示顏色會採用 --_accent-color，以配合主題調整顏色。

--_icon-size: 2ch;
--_icon-color: var(--_accent);

注意： 有了專屬屬性，即可自訂圖示顏色，不必變更強調色。

按鈕陰影

如要讓陰影正確配合淺色和深色模式調整，必須同時變更顏色和不透明度。淺色主題的陰影最好是細微的，並染上所覆蓋途徑的顏色。深色主題的陰影必須更深、更飽和，才能疊加在深色介面顏色上。

--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);

--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);

有了適應性顏色和強度，我就可以組裝兩種深度的陰影：

--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));

--_shadow-2: 
  0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
  0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));

此外，為了讓按鈕呈現稍微立體的樣貌，1px box-shadow 會建立錯覺：

--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);

按鈕轉場效果

按照自適應色彩的模式，我建立兩個靜態屬性來保留設計系統選項：

--_transition-motion-reduce: ;
--_transition-motion-ok:
  box-shadow 145ms ease,
  outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);

注意： 在按鈕的早期設計中，我為 border-color 加上動畫效果，而 border-color 位於 --_transition-motion-reduce 屬性中。我後來移除了該模式，但保留了圖案，以防再次改變心意。

選取器中的所有屬性

選取器中的所有自訂屬性

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  --_accent-light: hsl(210 100% 40%);
  --_accent-dark: hsl(210 50% 70%);
  --_accent: var(--_accent-light);


--_text-light: hsl(210 10% 30%);
  --_text-dark: hsl(210 5% 95%);
  --_text: var(--_text-light);

--_bg-light: hsl(0 0% 100%);
  --_bg-dark: hsl(210 9% 31%);
  --_bg: var(--_bg-light);

--_input-well-light: hsl(210 16% 87%);
  --_input-well-dark: hsl(204 10% 10%);
  --_input-well: var(--_input-well-light);

--_padding-inline: 1.75ch;
  --_padding-block: .75ch;

--_border-radius: .5ch;
  --_border-light: hsl(210 14% 89%);
  --_border-dark: var(--_bg-dark);
  --_border: var(--_border-light);

--_highlight-size: 0;
  --_highlight-light: hsl(210 10% 71% / 25%);
  --_highlight-dark: hsl(210 10% 5% / 25%);
  --_highlight: var(--_highlight-light);

--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%);
  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
  --_ink-shadow: var(--_ink-shadow-light);

--_icon-size: 2ch;
  --_icon-color-light: var(--_accent-light);
  --_icon-color-dark: var(--_accent-dark);
  --_icon-color: var(--accent, var(--_icon-color-light));

--_shadow-color-light: 220 3% 15%;
  --_shadow-color-dark: 220 40% 2%;
  --_shadow-color: var(--_shadow-color-light);
  --_shadow-strength-light: 1%;
  --_shadow-strength-dark: 25%;
  --_shadow-strength: var(--_shadow-strength-light);
  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
  --_shadow-2: 
    0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%))
  ;

--_shadow-depth-light: hsl(210 14% 89%);
  --_shadow-depth-dark: var(--_bg-dark);
  --_shadow-depth: var(--_shadow-depth-light);

--_transition-motion-reduce: ;
  --_transition-motion-ok:
    box-shadow 145ms ease,
    outline-offset 145ms ease
  ;
  --_transition: var(--_transition-motion-reduce);
}

深色主題調整

設定深色主題的屬性後，-light 和 -dark 靜態屬性模式的值就會變得清楚：

@media (prefers-color-scheme: dark) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_bg: var(--_bg-dark);
    --_text: var(--_text-dark);
    --_border: var(--_border-dark);
    --_accent: var(--_accent-dark);
    --_highlight: var(--_highlight-dark);
    --_input-well: var(--_input-well-dark);
    --_ink-shadow: var(--_ink-shadow-dark);
    --_shadow-depth: var(--_shadow-depth-dark);
    --_shadow-color: var(--_shadow-color-dark);
    --_shadow-strength: var(--_shadow-strength-dark);
  }
}

這不僅容易閱讀，這些自訂按鈕的消費者也能放心使用裸露的屬性，因為這些屬性會適當配合使用者偏好設定。

減少動態效果調整

如果訪客可以接受動作，請將 --_transition 指派給 var(--_transition-motion-ok)：

@media (prefers-reduced-motion: no-preference) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_transition: var(--_transition-motion-ok);
  }
}

幾個共用樣式

按鈕和輸入內容的字型必須設為 inherit，才能與網頁其餘部分的字型相符；否則瀏覽器會為這些元素設定樣式。這也適用於 letter-spacing。將 line-height 設為 1.5，即可設定上下留白的文字方塊大小：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  /* …CSS variables */

  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  border-radius: var(--_border-radius);
}

按鈕樣式

選取器調整

選取器 input[type="file"] 不是輸入內容的按鈕部分，虛擬元素 ::file-selector-button 才是，因此我已從清單中移除 input[type="file"]：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  
}

游標和觸控調整

首先，我將游標樣式設為 pointer 樣式，協助按鈕向滑鼠使用者指出按鈕可互動。然後我加入 touch-action: manipulation，讓點擊不必等待並觀察潛在的雙擊，使按鈕感覺更快：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;
}

注意： 如果 HTML 文件有 <meta name="viewport" content="width=device-width">，則不需要 touch-action: manipulation。如要瞭解詳情，請參閱 Chrome 開發人員網站。

顏色和邊框

接著，我使用先前建立的部分自適應自訂屬性，自訂字型大小、背景、文字和邊框顏色：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  font-size: var(--_size, 1rem);
  font-weight: 700;
  background: var(--_bg);
  color: var(--_text);
  border: 2px solid var(--_border);
}

陰影

這些按鈕採用了一些很棒的技術。text-shadow 會根據明暗調整，讓按鈕文字在背景上呈現令人愉悅的細微外觀。針對 box-shadow，系統會指派三個陰影。第一個 --_shadow-2 是標準方塊陰影。 第二個陰影是視覺效果，可讓按鈕看起來稍微向上傾斜。最後一個陰影用於懸停醒目顯示，一開始大小為 0，但稍後會調整大小並轉換，因此看起來會從按鈕擴大。

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  box-shadow: 
    var(--_shadow-2),
    var(--_shadow-depth),
    0 0 0 var(--_highlight-size) var(--_highlight)
  ;
  text-shadow: var(--_ink-shadow);
}

版面配置

我為按鈕提供 flexbox 版面配置， 具體來說，就是適合按鈕內容的 inline-flex 版面配置。接著，我將文字置中，並將子項垂直和水平對齊中心。這有助於圖示和其他按鈕元素正確對齊。

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

間距

按鈕間距方面，我使用 gap 避免同層級元素重疊，並使用邏輯屬性設定邊框間距，確保按鈕間距適用於所有文字版面配置。

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  gap: 1ch;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
}

觸控和滑鼠使用者體驗

接下來的內容主要適用於行動裝置的觸控使用者。第一個屬性 user-select 適用於所有使用者，可防止醒目顯示按鈕文字。在觸控裝置上，如果按住按鈕，作業系統會醒目顯示按鈕文字，這時最容易發現這個問題。

一般來說，我發現內建應用程式中的按鈕不會有這種使用者體驗，因此我將 user-select 設為 none 來停用這項功能。醒目顯示顏色 (-webkit-tap-highlight-color) 和作業系統內容選單 (-webkit-touch-callout) 是以網路為中心的其他按鈕功能，不符合一般按鈕使用者期望，因此我也將其移除。

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

轉場

自適應 --_transition 變數會指派給 transition 屬性：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  transition: var(--_transition);
}

當使用者將游標懸停在按鈕上，但未主動按下按鈕時，請調整陰影醒目顯示大小，讓按鈕看起來像是從內部成長，呈現美觀的焦點外觀：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):where(:not(:active):hover) {
  --_highlight-size: .5rem;
}

注意： 選取器會省略 ::file-selector-button，因為該效果無法在選取器中顯示。

聚焦時，請增加按鈕的焦點外框偏移量，讓焦點外觀從按鈕內向外擴展，呈現美觀的樣貌：

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

圖示

如要處理圖示，選取器會新增 :where() 選取器，用於直接 SVG 子項或具有自訂屬性 data-icon 的元素。圖示大小是使用內嵌和區塊邏輯屬性，透過自訂屬性設定。筆劃顏色已設定，且drop-shadow與 text-shadow 相符。flex-shrink 設為 0，因此圖示絕不會遭到擠壓。最後，我選取線條圖示，並在此指派這些樣式，使用 fill: none 和 round 線條端點和線條接合：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) > :where(svg, [data-icon]) {
  block-size: var(--_icon-size);
  inline-size: var(--_icon-size);
  stroke: var(--_icon-color);
  filter: drop-shadow(var(--_ink-shadow));

  flex-shrink: 0;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

自訂提交按鈕

我希望提交按鈕的外觀能稍微突出，因此將按鈕的文字顏色設為強調色：

:where(
  [type="submit"], 
  form button:not([type],[disabled])
) {
  --_text: var(--_accent);
}

自訂重設按鈕

我希望重設按鈕內建一些警告標誌，提醒使用者他們可能會有破壞性行為。我也選擇為淺色主題按鈕設定比深色主題更多的紅色強調色。如要自訂按鈕，請變更適當的淺色或深色底色，按鈕就會更新樣式：

:where([type="reset"]) {
  --_border-light: hsl(0 100% 83%);
  --_highlight-light: hsl(0 100% 89% / 20%);
  --_text-light: hsl(0 80% 50%);
  --_text-dark: hsl(0 100% 89%);
}

我也認為焦點外框顏色應與紅色調的強調色相符。文字顏色會從深紅色調整為淺紅色。我將外框顏色設為與關鍵字相符：currentColor：

:where([type="reset"]):focus-visible {
  outline-color: currentColor;
}

自訂已停用的按鈕

為了讓停用按鈕看起來較不活躍，我們通常會降低其色彩對比度，但這很容易導致停用按鈕的色彩對比度不佳。我測試了每個顏色組合，並確認通過測試，然後調整 HSL 亮度值，直到分數通過開發人員工具或 VisBug 測試為止。

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
)[disabled] {
  --_bg: none;
  --_text-light: hsl(210 7% 40%);
  --_text-dark: hsl(210 11% 71%);

  cursor: not-allowed;
  box-shadow: var(--_shadow-1);
}

自訂檔案輸入按鈕

檔案輸入按鈕是 span 和按鈕的容器。CSS 可以稍微設定輸入容器和巢狀按鈕的樣式，但無法設定 span。系統會提供 max-inline-size，因此容器不會超出所需大小，而 inline-size: 100% 則會自行縮小，以配合比自身小的容器。背景顏色會設為比其他介面深色的適應性顏色，因此會顯示在檔案選取器按鈕後方。

:where(input[type="file"]) {
  inline-size: 100%;
  max-inline-size: max-content;
  background-color: var(--_input-well);
}

檔案選取器按鈕和輸入類型按鈕會特別移除瀏覽器提供的樣式，這些樣式未遭其他按鈕樣式覆寫。appearance: none

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
  appearance: none;
}

最後，在按鈕的 inline-end 中加入邊界，將 span 文字從按鈕推開，建立一些空間。

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--_padding-inline);
}

深色主題的特殊例外狀況

我為主要動作按鈕加上深色背景，讓文字對比度更高，外觀也更顯眼。

@media (prefers-color-scheme: dark) {
  :where(
    [type="submit"],
    [type="reset"],
    [disabled],
    form button:not([type="button"])
  ) {
    --_bg: var(--_input-well);
  }
}

建立變化版本

為了好玩，也因為很實用，我選擇展示如何建立幾個變體。其中一個變化版本非常鮮明，與主要按鈕的常見外觀相似。另一個變體是「大型」。最後一個變體是填滿漸層的圖示。

醒目按鈕

為達到這個按鈕樣式，我直接以藍色覆寫基本屬性。雖然這樣做快速又簡單，但會移除自適應屬性，且淺色和深色主題的外觀相同。

.btn-custom {
  --_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
  --_border: hsl(228 89% 63%);
  --_text: hsl(228 89% 100%);
  --_ink-shadow: 0 1px 0 hsl(228 57% 50%);
  --_highlight: hsl(228 94% 67% / 20%);
}

注意： 如果想建構自適應主要動作按鈕，我會覆寫 --_bg-light 和 --_bg-dark，而不是 --_bg。覆寫這些變數可讓基本屬性在新的定義淺色和深色屬性之間切換。

大按鈕

如要製作這種按鈕，請修改 --_size 自訂屬性。 邊框間距和其他空間元素會依據這個大小調整，並隨著新大小成比例縮放。

.btn-large {
  --_size: 1.5rem;
}

圖示按鈕

這個圖示效果與按鈕樣式無關，但會說明如何使用少數 CSS 屬性達成效果，以及按鈕如何處理非內嵌 SVG 的圖示。

[data-icon="cloud"] {
  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;

  -webkit-mask: var(--icon-cloud);
  mask: var(--icon-cloud);
  background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}

結論

現在你已瞭解我的做法，你會怎麼做呢？🙂

讓我們多元化做法，學習在網路上建構內容的各種方式。

建立試聽版，然後在推特上傳送連結給我，我會將連結加到下方的社群混音區！

社群重混作品

目前沒有任何內容。

資源

• Github 上的原始碼