基本總覽,說明如何建構自動調整色彩、回應式且無障礙的 <button>
元件。
在這篇文章中,我想分享您對於如何建構自動調整顏色、回應式且易於使用的 <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 上的原始碼