构建按钮组件

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

Adam Argyle

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

<ph type="x-smartling-placeholder">
</ph>
在浅色主题和深色主题下，用户通过键盘和鼠标与按钮互动。

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

概览

浏览器支持

  • Chrome：1. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：1. <ph type="x-smartling-placeholder">
  • Safari：1. <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 type="x-smartling-placeholder">
</ph> 最终所有按钮类型的预览（以表单形式显示，而非以表单形式显示），并且为图标按钮和自定义按钮添加了一些不错的内容。 <ph type="x-smartling-placeholder">
</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);

选择器中同时涵盖所有房源

选择器中的所有自定义属性 

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

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

自定义按钮以浅色和深色显示。与典型的主要操作按钮一样，它也是非常鲜艳的蓝色。

大按钮

这种按钮样式是通过修改 --_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));
}

带有图标的按钮以浅色和深色主题显示。

总结

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

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

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

社区混剪作品

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

资源