css - 使用 CSS/HTML 保持按钮按下(插入)

Question

是否有 CSS 或 HTML 属性使按钮在未按下时看起来像被按下？

我为此搜索了很多，但我所能找到的只是关于制作你自己的具有按下效果的 CSS 按钮的提示。我正在寻找一种方法来使标准 HTML 按钮(例如 <button type="submit"></button>)在视觉上处于按下状态。我不会尝试实际按下该按钮并触发事件。

Answer 1

我认为你在这里混淆了一些东西。

首先，没有标准的HTML按钮。浏览器将呈现一个无样式的 <button>foo</button>基于它们的默认样式，这些样式在浏览器和操作系统之间略有不同。有些浏览器甚至允许用户自定义它们。这就是 CSS 重置/标准化器存在的原因。

可能有一种方法可以预设按钮的状态，但恕我直言，这没有任何意义。

与其设置状态以获得特定样式，不如定义样式并将其用于按钮状态。

让我们假设点击按钮的心智模型是绿色的:

.always_clicked,
.always_clicked:active,
.always_clicked:hover {

  background: green;
  /* and the rest of our perception
   * of a clicked button
   * i.e. border-style:inset;
   *      inversed gradients ...
   */
}

<button class="always_clicked">NousSommesUnis</button>