让所有链接都有一种微妙的按钮感

在当前的 CSS-Tricks 设计中，您可能已经注意到，所有链接在您点击它们时都会向下移动一个像素。 我开始在像 Tim Van Damme 和 Andy Clarke 这样的知名人士的网站上注意到这种效果，所以要承认他们的贡献。

正如您可能想象的那样，它非常简单。 让我们来看看。

因为我们希望在所有链接上实现这种“向下移动”的效果，而链接是内联元素，所以 `margin-top` 不起作用。 我们也不想使用 `padding`，因为它会改变框本身的大小，这可能会导致周围其他元素也发生移动，这是不希望看到的。 最合适的解决方案是position: relative，它允许我们从它们最初的静态定位中移动元素。

a:active {
  position: relative;
  top: 1px;
}

在这个网站上，这是一个关于向下移动一个像素的放大视图

问题

在这个网站上，我只是使用与上面代码相同的代码，这意味着它会影响网站上的所有链接。 有些人说这感觉有点过头。 我个人很喜欢它，并且喜欢这种一致性，但如果您觉得它有点过头（但仍然喜欢它），请在锚元素上使用更具体的选择器，以便在您网站的更具体区域使用它。

更重要的是，设置链接活动状态的不同定位值是一件需要非常小心的事情。 如果您网站上有任何被 **绝对** 定位的链接，让它们的活动状态更改为相对定位将会（可能）导致它们飞走并变得不可点击。 您可以通过在这些链接的活动状态下保持绝对定位来逐个解决此问题，甚至可以将它们的 `top` 值提高一个单位（或将 `bottom` 值降低一个单位）。