此页面由 Cloud Translation API 翻译。

构建按钮组件

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

Adam Argyle

在这篇博文中，我想分享一下如何构建颜色自适应自适应且易于使用的 <button> 元素。试用演示并查看来源

</ph>

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

如果你更喜欢视频，可以参阅此博文的 YouTube 版本：

概览

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

通过 <button> 是针对用户互动而构建的其 click 事件通过键盘触发，鼠标、触摸、语音等操作，还能对设备进行智能规则时间。此外，并且每个浏览器中都添加了一些默认样式任何自定义。使用 color-scheme 选择启用添加到由浏览器提供的浅色和深色按钮中。

此外还有不同类型的按钮，前面的 Codepen 嵌入代码中显示的每个 ID。没有类型的<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">

在本月的统一发票挑战中，每个按钮都有相应的样式，有助于从视觉上区分用户意图。重置按钮会显示警告颜色，因为它们具有破坏性，请提交按钮将会显示蓝色的重音文字，因此其宣传力度会略高于常规按钮。

最终所有按钮类型的预览（以表单形式显示，而非以表单形式显示），并且为图标按钮和自定义按钮添加了一些不错的内容。 — </ph> 最终所有按钮类型的预览，显示在表单而非表单中。为图标按钮和自定义按钮添加了一些不错的内容

按钮也具有伪类供 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 有助于我们清晰阐明就是这么简单！

无障碍

按钮元素使用起来自然是易于访问的，但一些常见的增强功能。

一起悬停和聚焦

我喜欢将 :hover 和 :focus 与 :is() 功能组合在一起伪选择器。这有助于确保我的界面始终考虑使用键盘和辅助技术样式

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 开发者工具。该树会忽略按钮图片，因为它已将 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 单位，图标大小为 2 个字符这将有助于图标根据按钮文字按比例缩放。通过图标颜色依赖于 --_accent-color，以实现自适应和主题内 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);

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

这不仅具有不错的效果，而且这些自定义按钮的消费者可以使用并确信它们会根据用户偏好做出适当的调整。

减少动作自适应

如果该访问者允许移动，请将 --_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 布局。然后居中以及将子元素垂直和水平对齐， 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;
}

注意：选择器中省略了 ::file-selector-button，因为在它看不到效果。

获得焦点后，增加焦点轮廓相对于按钮的偏移量，同时赋予其按钮内看起来逐渐变大的精美焦点外观：

: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 亮度值，并确保这些值通过了得分。

: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 能够稍微调整输入容器和嵌套按钮的样式，。为容器指定 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));
}

总结

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

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

创建演示，在 Twitter 微博上添加链接，然后我会添加到下面的社区混剪部分！

社区混剪作品

此处尚无任何可显示的内容。

资源

GitHub 上的源代码