幽灵按钮具有CSS中的方向意识

你可能已经见过幽灵按钮?，它们的特点是背景透明，鼠标悬停时背景填充为实色。Smashing Magazine 有一篇关于此主题的文章。本文将构建一个幽灵按钮，但这部分比较简单。有趣且棘手的是，我们要让幽灵按钮的填充动画从鼠标悬停的方位开始。

这是一个基本的幽灵按钮示例：

大多数情况下，背景颜色会过渡到实色。有些设计会让按钮从左到右、从上到下等方向填充，以增加视觉效果。例如，从左到右填充：

这里有一个用户体验上的小问题。如果鼠标悬停在填充区域的边缘，感觉会不太对劲。考虑这个例子，按钮从左侧填充，而你从右侧悬停。

最好让按钮从初始悬停点开始填充。

那么，我们如何赋予按钮方向感知能力呢？你最初的直觉可能是使用 JavaScript，但我们可以用 CSS 和一些额外的标记来实现。

对于那些想快速了解结果的人，这里有一些纯 CSS 实现的具有方向感知能力的幽灵按钮！

让我们一步一步地构建它。所有代码都可以在这个 CodePen 合集中找到。

创建基础

让我们从创建幽灵按钮的基础开始。标记很简单。

<button>Boo!</button>

我们的 CSS 实现将利用 CSS 自定义属性。这使得维护更容易，也方便通过内联属性进行自定义。

button {
  --borderWidth: 5;
  --boxShadowDepth: 8;
  --buttonColor: #f00;
  --fontSize: 3;
  --horizontalPadding: 16;
  --verticalPadding: 8;

  background: transparent;
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888;
  color: var(--buttonColor);
  cursor: pointer;
  font-size: calc(var(--fontSize) * 1rem);
  font-weight: bold;
  outline: transparent;
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  transition: box-shadow 0.15s ease;
}

button:hover {
  box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;
}

button:active {
  box-shadow: 0 0 0 #888;
}

组合在一起，我们得到：

很好！我们有一个按钮和悬停效果，但还没有填充效果。接下来让我们添加填充效果。

添加填充

为此，我们创建一些元素来显示幽灵按钮的填充状态。技巧是使用 clip-path 来裁剪这些元素并隐藏它们。我们可以通过转换 clip-path 来在悬停时显示它们。

它们必须与父按钮对齐。我们的 CSS 变量在这里将大有帮助。

起初，我们可以考虑使用伪元素。但是，对于每个方向，伪元素的数量是不够的。它们还会影响可访问性……稍后会详细说明。

让我们从添加一个基本的从左到右的填充开始。首先，让我们添加一个 <span></span> 元素。该 <span></span> 元素需要与按钮具有相同的文本内容。

<button>
  <span>Boo!</span>
  Boo!
</button>

现在我们需要将 <span></span> 元素与按钮对齐。我们的 CSS 变量将完成大部分工作。

button span {
  background: var(--buttonColor);
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  bottom: calc(var(--borderWidth) * -1px);
  color: var(--bg, #fafafa);
  left: calc(var(--borderWidth) * -1px);
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
}

最后，我们将 <span></span> 元素裁剪到视图之外，并添加一个规则，通过更新裁剪来在悬停时显示它。定义一个过渡将为它锦上添花。

button span {
  --clip: inset(0 100% 0 0);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
  /* ...Remaining div styles */
}

button:hover span {
  --clip: inset(0 0 0 0);
}

添加方向感知

那么，我们如何添加方向感知呢？我们需要四个元素。每个元素将负责检测悬停入口点。使用 clip-path，我们可以将按钮区域分成四个部分。

让我们向按钮添加四个 <span></span> 元素，并将它们定位以填充按钮。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Boo!
</button>

button span {
  background: var(--bg);
  bottom: calc(var(--borderWidth) * -1px);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  left: calc(var(--borderWidth) * -1px);
  opacity: 0.5;
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
  z-index: 1;
}

我们可以定位每个元素并使用 CSS 变量分配裁剪和颜色。

button span:nth-of-type(1) {
  --bg: #00f;
  --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}
button span:nth-of-type(2) {
  --bg: #f00;
  --clip: polygon(100% 0, 100% 100%, 50% 50%);
}
button span:nth-of-type(3) {
  --bg: #008000;
  --clip: polygon(0 100%, 100% 100%, 50% 50%);
}
button span:nth-of-type(4) {
  --bg: #800080;
  --clip: polygon(0 0, 0 100%, 50% 50%);
}

很酷。为了测试这一点，让我们在悬停时更改不透明度。

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  opacity: 1;
}

哦，这里有一个问题。如果我们进入并悬停在一个部分上，然后悬停在另一个部分上，填充方向将会改变。这看起来不太对劲。为了解决这个问题，我们可以在悬停时设置 z-index 和 clip-path，以便一个部分填充空间。

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 2;
}

组合在一起

我们知道如何创建填充动画，我们也知道如何检测方向。我们如何将两者结合起来呢？使用同级组合器！

这样做意味着当我们悬停一个方向段时，我们可以显示一个特定的填充元素。

首先，让我们更新标记。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  Boo!
</button>

现在，我们可以更新 CSS。参考我们的从左到右的填充，我们可以重用样式。我们只需要为每个元素设置一个特定的 clip-path。我按照一些属性值相同的顺序来处理。第一个子元素是顶部，第二个是右侧，依此类推。

button b:nth-of-type(1) {
  --clip: inset(0 0 100% 0);
}
button b:nth-of-type(2) {
  --clip: inset(0 0 0 100%);
}
button b:nth-of-type(3) {
  --clip: inset(100% 0 0 0);
}
button b:nth-of-type(4) {
  --clip: inset(0 100% 0 0);
}

最后一步是在悬停配对段时更新相关元素的 clip-path。

button span:nth-of-type(1):hover ~ b:nth-of-type(1),
button span:nth-of-type(2):hover ~ b:nth-of-type(2),
button span:nth-of-type(3):hover ~ b:nth-of-type(3),
button span:nth-of-type(4):hover ~ b:nth-of-type(4) {
  --clip: inset(0 0 0 0);
}

好了！我们得到了一个具有方向感知能力的纯 CSS 幽灵按钮。

可访问性

在当前状态下，按钮是不可访问的。

这些额外的元素并没有多大帮助，因为屏幕阅读器会重复内容四次。我们需要从屏幕阅读器中隐藏这些元素。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  Boo!
</button>

不再重复内容了。

就这样！

只需一些额外的标记和一些 CSS 技巧，我们就可以创建具有方向感知能力的幽灵按钮。使用预处理器或在你的应用程序中组合一个组件，你就不需要写出所有的 HTML 了。

这是一个使用内联 CSS 变量来控制按钮颜色的演示。

This revised output maintains the original image and uses more concise and varied phrasing while preserving the core meaning of the original text. It also addresses the accessibility issue mentioned in the original article.

以上是幽灵按钮具有CSS中的方向意识的详细内容。更多信息请关注PHP中文网其他相关文章！