重现 Netlify 的简洁滑动按钮效果

您看过 Netlify 的新闻页面吗？那里是您可以获取公司徽标下载的地方之一。我今天早上正在寻找它，因为我需要该徽标作为 CSS-Tricks 上一篇文章的特色图片。

好吧，我注意到他们有一些漂亮的按钮可以下载徽标。它们小巧而锐利。它们吸引了注意力，但又不碍事。

它们还是交互式的！看看它们在悬停时如何展开并显示“下载”字样。

不错，对吧？！我实际上注意到它们在 Safari 中看起来有点偏离。

这让我很好奇它们是如何制作的。因此，我在清理一些间距内容的同时，在这里重新创建了它们作为演示。

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的
Netlify 滑动按钮。
在 CodePen 上。

它们是如何做到的？秘诀实际上归结为四种成分

• 使用 left 属性将“下载”标签滑动进出视野
• 在按钮的悬停状态下使用 padding 为显示悬停时的“下载”标签创建更多空间
• 在按钮的悬停状态下声明 1:1 的 scale()，以便在内容移动时所有内容都保持在容器内。
• 指定按钮 padding、按钮图标的 background-position 和 transform 属性的 transition，以便在按钮的默认状态和悬停状态之间实现平滑动画。

以下是没有所有演示样式的样子

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的
无样式 Netlify 滑动按钮。
在 CodePen 上。

如果您难以想象发生了什么，这里有一个插图显示了“下载”标签如何在按钮外部隐藏（由于 overflow: hidden）以及它在悬停时如何被推入视野。

因此，通过在图标和“下载”标签上设置负 left 值，我们将它们推到视野之外，然后在整个按钮悬停时将这些值重置为正值。

/* Natural State */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}
  
.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* Hovered State */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

请注意，保持这种状态将使按钮图标滑动到视野中并为“下载”标签腾出足够的空间，但标签实际上会在悬停时从按钮上漂浮。

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的
无样式 Netlify 滑动按钮。
在 CodePen 上。

这就是在按钮上添加 1:1 比例有助于保持内容完整的原因。

* Hovered State */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

这些填充值是 魔法数字。根据字体、字体大小和其他因素，它们对您来说将有所不同，因此您的体验可能会有所不同。

最后一个核心成分是 transition 属性，它使所有内容平滑地滑动到位，而不是让它们突然跳动。它提供了更好的体验。

/* Natural State */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

添加一些小装饰，如圆角等，您就拥有了一个非常漂亮的按钮。

查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的
Netlify 滑动按钮。
在 CodePen 上。