建立按鈕元件

基本總覽，說明如何建構色彩自動調整、回應式且無障礙的 <button> 元件。

Adam Argyle

在本文中，我想分享如何建構色彩自動調整、回應式且無障礙的 <button> 元素。試用示範和查看原始碼

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

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

總覽

Browser Support

• 1
• 12
• 1
• 1

Source

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

此外，還有不同類型的按鈕，如上方的 Codepen 嵌入所示。沒有類型的 <button> 會調整為在 <form> 內，並變更為提交類型。

<!-- buttons -->
<button></button>
<button type="su><bmit&qu>o<t;/button
button typ><e=">;<button"/button><
button> t<ype="reset&quo>t<;/button

!-- b><utton s>ta<te --
button disable>d</button

!-- input bu>t<tons --
input typ>e="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&quo<t; va>lu>e<=">;in<put"/
button
  svg viewBox="0 0 24 24" width=">;24&q<uot; height=&q>uot<;24&>quot; ar<ia-hidd>e<n="true"
 >   pat<h d=&qu>o<t;..." /
  /svg>
  Icon
/bu<tton
bu>t<ton type="subm>it&qu<ot;Subm>i<t/button
button> type=&q<uot;but>t<on"Type Button/butto>n
butt<on type>=<"reset">Reset/button
button disabledDisabled/button
button class="btn-custom"Custom/button
input type="file"

接著，為了進行測試，每個按鈕都會放在表單中。這樣一來，我就能確保預設按鈕 (做為提交按鈕) 的樣式會正確更新。我也將圖示策略從內嵌 SVG 改為遮罩 SVG，確保兩者都能正常運作。

<form>
  <button>Default</button>
  <input type="button&quo<t; va>lu>e=&<quot;i>nput&<quot;/
  buttonIcon sp><an da><ta-icon>=&q<uot;cloud"/span>/butto<n
  but>ton< type="submit&q>uot;Submit/<button
>  b<utton type="bu>tton&<quot;Ty>pe <Button/button
 > button <type=&q>uot<;reset"Reset/button
  button disabledDisable>d/button
  b<utton c>las<s="btn-custo>m< btn->large" type="button"Large Custom/button
  input type="file"
/form

此時，組合矩陣會變得非常龐大。按鈕類型、虛擬類別，以及是否在表單中，按鈕組合超過 20 種。幸好 CSS 能協助我們清楚表達每個概念！

無障礙設定

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

同時懸停和聚焦

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

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

試用示範！

互動式聚焦環

我喜歡為鍵盤和輔助技術使用者製作焦點環動畫。我將外框從按鈕向外移動 5 像素，但只有在按鈕未啟用時才會這樣做。這樣一來，按下按鈕時，焦點環就會縮回按鈕大小。

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

確保色彩對比符合標準

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

對無法查看的使用者隱藏圖示

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

<button>
  <svg … aria-hidden=">tru<e&qu>ot;.../svg
  Ic<on Butt>on
/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() 中，系統會選取每個按鈕類型，包括無法在 :is() 或 :where() 中使用的 ::file-selector-button。

: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);

按鈕文字顏色

按鈕文字顏色不是白色或黑色，而是使用 hsl() 變暗或變亮的 --_accent 版本，並保持色調 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);

注意： 在按鈕的早期設計中，我為 --_transition-motion-reduce 屬性中的 border-color 加上動畫效果。後來我移除了這個功能，但保留了圖案，以防我再次改變主意。

選取器中的所有屬性

選取器中的所有自訂屬性

: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: hs
l(
210 50% 70%);
  --_accent: var(--_accent-light);

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

--_bg-light: hsl(0 0% 100%);
  --_bg
-d
ark: 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);

--_
pa
dding-inline: 1.75ch;
  --_padding-block: .75ch;

--_border-radius: .5ch;
  --_border-light: hsl(210 14% 89%);
  --_border-dark: v
ar
(--_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);
  --_ic
on
-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(--_sha
do
w-color)/calc(var(--_shadow-strength) + 5%))
  ;

--_shadow-depth-light: hsl(210 14% 89%);
  --_shadow-depth-dark: var(--_bg-dar
k)
;
  --_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 的元素。圖示大小是使用內嵌和區塊邏輯屬性，透過自訂屬性設定。設定筆劃顏色，以及與 text-shadow 相符的 drop-shadow。flex-shrink 設為 0，因此圖示不會遭到擠壓。最後，我選取線條圖示，並使用 fill: none 和 round 線條端點和線條接合處，在這裡指派這些樣式：

:where(
  button,
  input[type="button"],
  input[type="submit"],
  in>put[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;
}

自訂停用的按鈕

為了讓停用的按鈕看起來不那麼醒目，往往會降低色彩對比度，我測試了每個顏色組合，並確保它們通過測試，在 DevTools 或 VisBug 中調整 HSL 亮度值，直到分數通過為止。

: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 上的原始碼