建立按鈕元件

概略說明如何建構可自動調整顏色、回應式和無障礙 <button> 元件的基礎。

Adam Argyle

在這篇文章中，我想分享我對於如何打造自動調整色彩的想法。 回應式和可存取的 <button> 元素。 立即試用示範模式及查看 來源

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

如果您喜歡看影片，請參考這篇文章的 YouTube 版本：

總覽

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：1.
  • Safari：1.

資料來源

<button>敬上 元素是為使用者互動而設計，它是從鍵盤觸發 click 事件。 同時利用滑鼠、觸控和語音等技術，打造文字 時間。這個平台也能提供 與每個瀏覽器中一些預設樣式相比，您可以直接使用這些樣式，而 可自訂任何自訂項目請使用 color-scheme 選擇啟用 轉換成瀏覽器提供的淺色和深色按鈕。

您也可以新增不同類型的 按鈕 如先前的 Codepen 嵌入所示如果 <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>

目前組合的矩陣會不知所未有。按鈕之間 虛擬類型、虛擬類別 以及表單形式的特徵 按鈕組合。CSS 能讓我們清楚表達 大家都清楚知道

無障礙設定

按鈕元素很容易使用，但有一些常見元素 強化功能

懸停並同時聚焦

我希望使用 :is() 功能將 :hover 和 :focus 分組 虛擬選取器。這能確保我的介面一律將鍵盤納入考量 以及輔助技術樣式

button:is(:hover, :focus) {
  …
}
敬上
歡迎試用示範！

互動式對焦環

我想為鍵盤和輔助技術使用者的焦點環加上動畫效果。I 可將按鈕的外框與按鈕的外框設為 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。
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);
  }
}
敬上

我最滿意的是淺色和深色主題。 間接和抽象化會卸載到 --_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%));

此外，如要將按鈕稍微呈現 3D 外觀，1px 方塊陰影 這樣可產生幻覺：

--_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);
敬上

選取器中的所有屬性會一併顯示

選取器中的所有自訂屬性 

: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;
}
敬上

顏色和框線

接下來，我使用一些 所建立可自動調整自訂屬性的其中幾項：

: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 版面配置。然後置中 並以垂直和水平方向對齊子項 center。這有助於圖示和其他 按鈕元素才能正確對齊。

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

當焦點位於焦點時，就能從按鈕提高焦點外框偏移值，並使 良好的聚焦外觀似乎從按鈕內延伸：

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

圖示

針對處理圖示，選取器有新增直接 SVG 的 :where() 選取器 子項或含有自訂屬性 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);
}

顯示套用上述樣式後按鈕的螢幕截圖。

自訂檔案輸入按鈕

檔案輸入按鈕是跨距和按鈕的容器。CSS 能夠 稍微設定輸入容器和巢狀按鈕的樣式 這麼一來容器會獲得 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 會加入邊界，推送 S 文字 拉出按鈕，騰出一些空間

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

自訂按鈕會以淺色和深色顯示。它的藍色部分非常鮮豔，與一般的主要動作按鈕一樣。

大型按鈕

透過修改 --_size 自訂屬性即可套用此按鈕樣式。 邊框間距和其他空間元素的相對大小，會隨著這個大小縮放 按比例調整

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

大型按鈕會顯示在自訂按鈕旁，約為 150 倍。

圖示按鈕

這個圖示效果與按鈕樣式無關，但是會有什麼影響 示範如何使用幾個 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));
}

附有圖示的按鈕會以淺色和深色主題顯示。

結論

現在你知道我怎麼了，這樣會如何 🙂?

讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。

建立示範、將 Twitter 推文連結，我們就會為您新增 前往下方的社群重混專區！

社群重混作品

目前還沒有任何資訊。

資源