建立按鈕元件

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

Adam Argyle

在這篇文章中，我想分享您對於如何建構自動調整顏色、回應式且易於使用的 <button> 元素有何想法。試用示範並查看原始碼

如果你偏好使用影片，也可以觀看這篇 YouTube 文章：

總覽

<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 Challenge 中，每個按鈕都會取得樣式，以視覺化方式區分其意圖。重設按鈕具有破壞性，因此會顯示警告顏色，而提交按鈕則會取得藍色強調色文字，因此看起來比一般按鈕稍微高。

按鈕也有虛擬類別，可讓 CSS 用來設定樣式。這些類別提供 CSS 掛鉤，可自訂按鈕的特色：:hover 適用於滑鼠懸停按鈕、按下 :active 和按下滑鼠或鍵盤時的 :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 是很好的事，我們可以 幫助我們清楚交代每個它們！

無障礙功能

按鈕元素雖然很容易存取，但還有幾項常見的強化功能。

懸停及聚焦

我想要使用 :is() 函式虛擬選取器將 :hover 和 :focus 分組。這能確保我的介面一律都會考慮鍵盤和輔助技術樣式。

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

互動聚焦環

我想為鍵盤和輔助科技使用者製作焦點環的動畫。我之前在按鈕處於未啟用狀態時，將外框與按鈕外框一樣動畫，使其與按鈕外框保持動畫效果。這樣做可以產生一種效果，按下時，焦點環會縮小為按鈕大小。

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

確保傳遞色彩對比

淺色和深色至少有四種不同的顏色組合，需要將色彩對比納入考量：按鈕、提交按鈕、重設按鈕和已停用的按鈕。您可以使用 VisBug 一次檢查並顯示所有分數：

看不到看不到的人物的圖示

建立圖示按鈕時，該圖示應以視覺方式支援按鈕文字。這也表示該圖示對視障者沒有價值。幸好，瀏覽器可讓您透過螢幕閱讀器技術隱藏項目，讓視障使用者不必使用裝飾按鈕圖片感到困擾：

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

風格

在下一節中，我先建立自訂屬性系統來管理按鈕的自動調整樣式。使用這些自訂屬性後 就能選取元素並自訂外觀

自動調整自訂屬性策略

此 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() 中，系統會選取每個按鈕類型，包括在 :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%));

此外，為了讓按鈕呈現略微 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 版面配置。然後將文字置中，然後以垂直和水平方式將子項對齊中心。這有助圖示和其他按鈕元素正確對齊。

: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 設為無，藉此停用此功能。輕觸醒目顯示顏色 (-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;
}

圖示

為了處理圖示，選取器新增了 :where() 選取器，適用於直接 SVG 子項，或含有自訂屬性 data-icon 的元素。圖示大小是以自訂屬性設定，使用內嵌和區塊邏輯屬性進行設定。已設定筆劃顏色，以及與 text-shadow 相符的 drop-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 能夠稍微為輸入容器和巢狀按鈕設定樣式，但不支援 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%);
}

大型按鈕

此按鈕樣式是透過修改 --_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));
}

結論

現在既然你已經知道我怎麼做，你會怎麼做‽ 🙂?

讓我們帶您更多元的方法，並瞭解運用網路打造網站的所有方式。

請建立示範並透過 Twitter 推文連結，我就能將這項工具新增至下方的「社群重混」部分！

社群重混作品

這裡還沒有內容。

資源

• GitHub 上的原始碼