按钮无处不在！

我们可以使用各种花样的 CSS 来样式化按钮。例如，我更喜欢使用 Flexbox 布局。在这篇博文中，我将分享一些不太为人所知的 CSS 样式。

让我们使用这个示例代码：

<button type="submit" class="button">
  <img href="icon.svg" alt="">
  <span>登录</span>
</button>

触摸操作

你是否曾经反复点击按钮，结果页面突然意外放大？比如音频播放器中的倒带和快进按钮。这种意外的副作用可以通过 touch-action 来移除：

.button {
  touch-action: manipulation;
}

manipulation 值可以禁用诸如“双击缩放”的手势。其他手势，如“拖动”和“捏合缩放”，则不受影响。额外的好处是浏览器不再需要延迟 click 事件等待第二次点击。

一些文章和评论建议通过在 HTML 中使用 viewport meta 标签 来完全禁用缩放 —— 绝对不要这样做！

意外选择

许多网站将重要的链接样式化为按钮的外观。通常会使用一个共享的类，如 .button。例如：

<a class="button" href="/sign-in">登录</a>

反复点击按钮的另一个不良副作用是文字内容可能会被错误地选择和突出显示。这也可以被禁用：

.button {
  user-select: none;
}

user-select 属性可用于使内部文本不可选择。这在 Firefox 中是默认样式，但在其他浏览器中不是。要谨慎使用！取决于你读到这篇文章的时间，Safari 可能仍然需要一个 -webkit 前缀。

浏览……

样式表中经常缺少的另一个隐藏按钮。

<input type="file">

文件输入包含一个按钮在其 Shadow DOM 中。默认外观在浏览器和操作系统之间有所不同。

文件输入可能如下所示

别担心！CSS 也可以处理这个按钮：

.button,
::file-selector-button {
  /* 精致的 */
}

::file-selector-button 是一个 CSS 伪元素，可以样式化浏览按钮。所有现代浏览器都支持它。直到最近，我自己都不知道这个。

视觉焦点

无障碍对每个人都很重要。我喜欢使用键盘导航来遍历交互式元素。不幸的是，有多少客户让我“去掉那个丑陋的边框”围绕着焦点的按钮，我已经数不清了。

按钮焦点状态可以通过两个技巧来改进：

.button {
  /*
  // 已移除 – 请看下面的更新！
  &:focus {
  outline: none;
  }
  */
  &:focus-visible {
  outline: 2px solid magenta;
  outline-offset: 2px;
  }
}

2024年3月20日更新

已经有人指出，移除默认的 :focus 状态是不必要的。

首先，我用 focus-visible 替换了默认的 focus 伪类。MDN 上有一个关于 focus vs focus-visible 的长篇章节。基本上，这是事后看来最初应该是什么样的。

其次，我使用 outline-offset 在焦点环和按钮本身之间留出一些空间。如果按钮有显著的 border 样式，那么 outline 将与其紧密相连，看起来就像是双重边框。添加一个偏移量使焦点状态更加可见。

需要注意的是，::file-selector-button 不会获得焦点，而是其父级 input，所以应用样式时要在那里。

逻辑大小

.button {
  inline-size: fit-content;
}

这个样式使按钮的宽度使用可用空间，但不超过按钮的 max-content。除了我使用 inline-size 而不是 width。

在我的样式表中，width 是被禁止的属性！

要了解为什么，你的功课就是学习：CSS 逻辑属性和值。还要查看：从右到左的样式化 101 —— 一个非常宝贵的指南。

总结

我在这里讨论的按钮样式总结如下：

.button,
::file-selector-button {
  inline-size: fit-content;
  touch-action: manipulation;
  user-select: none;
}

* {
  &:focus-visible {
  outline: 2px solid magenta;
  outline-offset: 2px;
  }
}

这是我的按钮默认样式的一部分。

通常我会使用 SVG 图标。根据用例，它们可以嵌入到 HTML 中或者嵌入到 CSS 中（查看我的 CSS mask 教程 作为示例）。

没错，那

就是本地的 CSS 嵌套！尽管我仍然使用后处理来扁平化选择器。Lightning CSS 是我当前选择的工具。我可能有点太早地 告别 了 CSS 处理。