🤓💻 我们可以从 Valorant 页面上的一个按钮中学到什么

Valorant 是竞技类 FPS 游戏的新宠。Valorant
目前处于封闭测试阶段，只有将您的 Twitch 账号与 Riot（Valorant 背后的公司）账号关联，并观看至少 2 小时的直播后，才能参与测试。2 小时后，您将获得随机掉落物品。

因此，在过去的五天里，我多次查看了Valorant 网站😂🤣

Valorant 网站让我最欣赏的一点是它的整体设计。
最让我印象深刻的元素是那些按钮。

这就是为什么我们今天要建造它们，在这里我们可以看看它的样子

设置

我们首先需要的是一个index.html文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="button.css" />
  </head>

  <body>
    <div id="container">
      <div class="box">
        <button class="primary" type="button">
          <div class="label">
            <span class="hover-effect"></span>
            <span class="label-text">Primary Button</span>
          </div>
        </button>
        <button class="outline" type="button">
          <div class="label">
            <span class="hover-effect"></span>
            <span class="label-text">Outline Button</span>
          </div>
        </button>
        <button class="outline red" type="button">
          <div class="label">
            <span class="hover-effect"></span>
            <span class="label-text">Outline Red Button</span>
          </div>
        </button>
      </div>
    </div>
  </body>
</html>

这是示例的最终 HTML 代码。我刚刚删除了 SVG 徽标和小问题。希望这段 HTML 代码清晰易懂，如果您有任何疑问，请在下方评论。

接下来我们需要创建的是style.css和button.css。第一个文件用于设置页面的总体情况，这篇博文的核心部分将是关于，button.css我们将在其中介绍如何创建按钮的样式 😁👍

style.css

@font-face {
  font-family: "DIN Next LT Pro Bold";
  src: url("//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot");
  src: url("//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.svg#DIN Next LT Pro Bold")
      format("svg");
}

:root {
  --v-red: #ff4655;
  --v-white: #ece8e1;
  --v-black: #0f1923;
  --v-outline: rgba(236, 232, 225, 0.5);
}

*,
::after,
::before {
  box-sizing: border-box;
}

html,
body {
  font-size: 10px;
  margin: 0;
  background-color: var(--v-black);
  color: var(--v-white);
  font-family: "Valorant";
  text-rendering: optimizeLegibility;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.box {
  width: 50%;
}

首先，我们需要加载名为“DIN Next LT Pro Bold”的字体。这是按钮使用的字体。接下来，我们设置一些 CSS 变量。它们都是颜色：白色、黑色、红色和轮廓色。这些通常是 Valorant 使用的主要颜色，几乎所有网站都只使用这些颜色。

其余代码一部分用于 CSS 重置，一部分用于内容居中。
我们在这里使用了 flexbox 来使内容垂直和水平居中——这里没什么特别的，只是一个 flexbox 布局。如果您对此部分有任何疑问，请在下方评论！

按钮

那么，让我们开始主要部分，甚至是按钮！
首先，让我们给它们设计一个非常通用的样式。

button {
  width: 100%;
  margin-bottom: 3rem;
  position: relative;
  display: block;
  font-size: 1.9rem;
  padding: 0.7rem;
  border: 0;
  text-transform: uppercase;
  background-color: transparent;
  cursor: pointer;
  color: var(--v-white);
}

为了让按钮看起来像页面上的样子，我们需要将字体大小设置为 1.9rem，也就是 19px，因为我们在中将字体大小设置为 10px style.css。同样重要的是将背景颜色设置为透明，并将边框设置为 0。设置这些很重要，因为我们会覆盖默认值。我们还将颜色设置为 Valorant 白色。如果你查看页面，所有按钮都是大写的。我们可以使用来强制执行text-transform: uppercase;。这position: relative对于获得正确的效果也很重要。

button::before,
button::after {
  background-color: transparent;
  content: "";
  display: block;
  position: absolute;
  height: calc(50% - 0.4rem);
  width: 100%;
  border: 1px solid var(--v-outline);
  left: 0;
}

button::before {
  border-bottom: 0;
  top: 0;
}

button::after {
  border-top: 0;
  bottom: 0;
}

button:hover {
  color: var(--v-white);
}

现在，我们开始设计样式并添加动画。每次鼠标悬停在页面上时，你都能看到相同的效果。此外，所有按钮周围的细边框也清晰可见。

边框是通过:after和:before伪元素实现的。这里的技巧是将位置设置为absolute，高度也很重要。这将产生不完全环绕元素的效果。为了实现此效果，我们需要将设置为，:after使其top贴0在顶部，并将设置为，border-bottom以o隐藏底部边框；我们需要对执行相反的操作:before。因此，将设置bottom为0，使其贴在底部，并将border-top设置为，0以隐藏顶部边框。

我们还可以设置鼠标悬停在按钮上时文本的默认颜色。它将是 Valorant 白色。

接下来，我们需要准备我们的label。标签用作文本和效果的包装器。

.label {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.label:before {
  content: "";
  height: 100%;
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

这里我们需要使用 :before 伪元素来为轮廓按钮添加样式。这将在按钮周围创建轮廓，之后我们可以根据需要为其添加样式。

接下来是悬停效果。

.hover-effect {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 120%;
  top: 0;
  left: -5%;
  z-index: 1;
  background-color: var(--v-red);
  transform: translateX(-100%) skew(-10deg);
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

button:hover .hover-effect {
  transform: translateX(0) skew(-10deg);
}

到这里，我们就能看出诀窍了！一开始我们没看到什么特别的。
我们创建了一个略宽的元素。我们还需要将它向左移动 -5%，否则当你没有将鼠标悬停在元素上时，你会看到元素的尖端。
我们还需要确保这个元素位于实际按钮的顶部，因此我们将 z-index 设置为 1。稍后，我们也会对标签文本元素执行相同的操作。由于所有悬停效果都是红色的，我们可以设置背景。

现在我们只需要将transform元素向左倾斜即可。在 Valorant 页面上，他们使用的是 -10 度。你可以尝试一下，也许你会发现其他很酷的效果。

为了使悬停时的效果可见，我们需要将translateX值设置回 0，以便我们可以再次看到该元素。

好的，最后的设置步骤是标签文本。

.label-text {
  position: relative;
  display: block;
  padding: 1.9rem 3rem;
  background-color: transparent;
  z-index: 1;
}

.label-text::after {
  content: "";
  display: block;
  position: absolute;
  height: 0.6rem;
  width: 0.6rem;
  right: 0;
  bottom: 0;
  transition: background-color 0.2s ease-in;
}

这里也没什么特别的。重要的是我们需要将 z-index 和 background-color 设置为透明，因为颜色将来自 ::before 元素！

如果仔细观察，你会发现按钮右下角有一个小矩形。这是通过 after 伪元素实现的，本质上，它只是一个位于其他元素之上的小元素。

现在我们可以开始设置按钮的样式了。对于主按钮，我们需要以下 CSS

.primary {
  color: var(--v-black);
}

.primary .label::before {
  background-color: var(--v-white);
}

这很简单，对吧？.primary选择器设置字体颜色，然后.primary .label::before设置背景颜色。现在，您可以根据需要创建颜色组合。

对于两个轮廓按钮，我们需要设置相应元素的颜色。

/* OUTLINE BUTTON */
.outline {
  color: var(--v-white);
}

.outline .label::before,
.outline .label::after {
  border: 1px solid var(--v-outline);
}

/* OUTLINE RED BUTTON */
.outline + .red {
  color: var(--v-red);
}

.outline + .red:hover {
  color: var(--v-white);
}

.outline + .red .label::before,
.outline + .red .label::after {
  border-color: var(--v-red);
}

我们需要查看颜色，对于 .outline 元素，通常需要设置边框宽度和类型，当然还有颜色。
现在你也可以像上面那样创建颜色组合了。

真有趣！

鏂囩珷鏉ユ簮锛�https://dev.to/lampewebdev/what-we-can-learn-from-one-button-on-the-valorant-page-10g