🤓💻 What we can learn from one Button on the Valorant Page

Valorant the new hype when it comes to competitive FPS games.
Valorant right now is in closed beta, and you can only get access to the beta if you have connected your twitch account to your riot (the company behind Valorant) account and have watched a stream for at least 2 hours. After these 2 hours, you can get a random drop.

Because of that, I checked the Valorant website many times in the last five days 😂🤣

One thing I liked from the Valorant websites is the overall design.
One element that stuck out the most to me were the buttons.

That's why we will build them today and here we can see how it will look

The Setup

The first thing we need is an index.html file.

<!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>

This is the finale HTML from the example you could see. I just removed the SVG logo and the small question. I hope the HTML is clear, and if you have any questions about it, please comment down below.

The next thing we need to create is the style.css and the button.css. The first file is for setting up the page in general, and the central part of this blog post will be about the button.css where we will go through how to create the styling for the buttons 😁👍

The 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%;
}

First, we need to load the font named 'DIN Next LT Pro Bold'. This is the font used for the buttons. Next, we are setting up some CSS Variables. All of them are colors. White, Black, Red, and the Outline color. These are, in general, the main colors used by Valorant and almost all of the website uses just these colors.

The rest of the code is part CSS reset and part centering content.
We are using flexbox here to center out content vertical and horizontal—nothing special here, just a flexbox layout. If you have any questions about this part, please comment down below!

The buttons

So let us go to the main, even the buttons!
First, let's style them very generally.

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);
}

To make the buttons look like on the page we need to set the font-size to 1.9rem which should be 19px because we set the font-size to 10px in the style.css. What is also important to set the background-color to transparent and the border to 0. This is important to set so we are overwriting the defaults. We are also setting the color to our Valorant white. If you look at the page all buttons are upercased. We can enforce this with text-transform: uppercase;. Also position: relative is important for getting the effect right.

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);
}

Now, let us start with styling and adding animations. Looking on the page again every time you hover, you can see the same effect. Also, the thin borders around the buttons you can see in all of them.

The border is achieved with the :after and :before pseudo-elements. The trick here is to set a position to absolute and the height here is also essential. This will create the effect of not wrapping around completely the element. To make the effect work we need to set in the :after the top to 0 to make it stick to the top and the border-bottom also to o to hide the border at the bottom and we need to do the opposite with the :before. So setting bottom to 0 to make it stick to the bottom and border-top to 0 to hide the top border.

We also can set the default color of the text when we hover over the button. It will be Valorant white.

Next, we need to prepare our label. The label is used as a wrapper for the text and the effect.

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

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

We need the :before pseudo-elements are needed here for our outline buttons. This will create the outline around the button, and we can style it according to our needs later.

Next, the hover effect.

.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);
}

Here we can see the trick! first we don't see anything special.
We are creating a slightly wider element. We also need to move it -5% to the left, or you could see the tip of the element when you are not hovering over it.
We also need to make sure that this element is on top of the actual button, so we are setting the z-index to 1. We will also do the same later on the label text element. Since all hover effects are red, we can set our background.

Now we only need to transform the element to the left and skew it. On the Valorant page, they are using -10deg. You can play around with that, and maybe you will find another cool effect.

To now make the effect visible on hover, we need to set now the translateX value back to 0, so we can see the element again.

Okay, the last setup step is the label text.

.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;
}

Again nothing special here. The important things here are that we need to set the z-index and the background-color to transparant since the color will come from the ::before element!

If you look closely, you can see a small rectangle in the bottom right corner of the button. This is done with the after pseudo-element and basically, it is just a small element that is on top of the other element.

We can now start to style our buttons. For the primary button, we need the following CSS

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

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

That is easy, right? The .primary selector is setting the font color and the .primary .label::before will set the background color. You can now create your color combinations if you want to.

For the two outline buttons, we need to set the colors of the corresponding elements.

/* 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);
}

We need to see the colors, and for the .outline element, in general, we need to set the border width and type and, of course, also color.
You can now also create your color combinations like that.

That was fun!

Blog

🤓💻 What we can learn from one Button on the Valorant Page

Michael "lampe" Lazarski

The Setup

The style.css

The buttons

Join Our Newsletter. No Spam, Only the good stuff.

Related