构建按钮组件

简要介绍了如何构建自适应颜色、响应迅速且易于访问的 <button> 组件。

Adam Argyle

在本文中，我想分享一下如何构建自适应、易于使用的颜色自适应 <button> 元素。试用演示版并查看源代码

在浅色和深色主题中，用户可以通过键盘和鼠标与按钮互动。

如果您更喜欢视频，请观看此帖子的 YouTube 版本：

概览

浏览器支持

• 1
• 12
• 1
• 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 {}

深色主题中最后一组所有按钮类型的预览

Markup

除了 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) {
  …
}

试用演示版！

互动式对焦环

我喜欢为使用键盘和辅助技术的用户添加聚焦环动画。为此，我通过动画效果将轮廓从按钮移出 5 像素，但仅在按钮处于非活动状态时执行此操作。这样就会产生一种效果，使焦点环在按下后会收缩为按钮大小。

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

确保通过颜色对比度测试

浅色和深色主题至少有四种不同的颜色组合需要考虑颜色对比度：按钮、提交按钮、重置按钮和停用按钮。此处使用 VisBug 一次性检查和显示它们的所有得分：

向看不见的人隐藏图标

创建图标按钮时，图标应为按钮文本提供视觉支持。这也意味着，此图标对视力受损的用户而言没有价值。幸运的是，浏览器提供了一种方法，可将内容隐藏起来，不让屏幕阅读器技术读出，以免视力受损的用户受到装饰性按钮图片的干扰：

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

Chrome DevTools，其中显示了按钮的无障碍功能树。 树会忽略按钮图片，因为其 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);

按钮文字颜色

按钮文本颜色不是白色或黑色，而是使用 hsl() 并坚持色调 210 的调暗或变亮版本的 --_accent：

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

按钮背景色

按钮背景遵循相同的 hsl() 模式，浅色主题按钮除外，这些按钮会设为白色，以便其 Surface 使其看起来靠近用户或位于其他 Surface 前面：

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

按钮背景

此背景颜色用于使 Surface 显示在其他 Surface 后面，对文件输入的背景很有用：

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

注意：由于具有自己的属性，因此无需更改强调色即可自定义图标颜色。

按钮阴影

为了让阴影能够适应浅色和深色模式，它们需要同时调整颜色和不透明度。浅色主题阴影最好是细微的，并且与其叠加的 Surface 颜色相近。深色主题的阴影需要颜色更深且饱和度更高，才能叠加在更深的表面颜色上。

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

注意 ：在按钮的早期设计中，我为位于 --_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: 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);
  }
}

这样不仅读起来顺畅，而且这些自定义按钮的使用方可以放心地使用裸 Props，因为它们会根据用户偏好进行适当调整。

减少动画适配

如果此访问用户可以看到动作，请将 --_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"],
  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 亮度值，直到在 DevTools 或 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% 会允许自身缩小，以适应比其小的容器。背景颜色设置为比其他 Surface 更深的自适应颜色，因此看起来位于文件选择器按钮后面。

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

总结

现在您已经知道我是怎么做到的了，您该怎么做 ‽ 🙂?

让我们一起采用多样化的方法，学习所有在 Web 上构建应用的方法。

创建一个演示，在 Twitter 微博中发送链接，然后我会将其添加到下面的“社区混剪”部分！

社区混剪作品

此处尚无可显示的内容。

资源

• GitHub 上的源代码