<!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>
</head>
<body>
<div id="container">
<div class="box">
<svg class="logo" viewBox="0 0 690 98.9">
<path
d="M615.11 19.15h24.69l.08 75.59c0 .97.79 1.77 1.77 1.77l14.14-.01c.98 0 1.77-.79 1.77-1.77l-.08-75.58h30.96c.91 0 1.43-1.06.85-1.77l-10.6-13.26a4.68 4.68 0 00-3.65-1.76h-59.93c-.98 0-1.77.79-1.77 1.77v13.26c0 .96.79 1.76 1.77 1.76M19.25 94.75L91.67 4.13c.57-.71.06-1.77-.85-1.77H72.71c-1.42 0-2.77.65-3.65 1.76L17.68 68.4V4.12c0-.98-.79-1.77-1.77-1.77H1.77C.79 2.35 0 3.14 0 4.12v90.62c0 .98.79 1.77 1.77 1.77H15.6c1.42 0 2.76-.65 3.65-1.76m51.06 0l24.91-31.17 24.91 31.17a4.685 4.685 0 003.66 1.76h13.83c.98 0 1.77-.79 1.77-1.77V4.12c0-.97-.79-1.77-1.77-1.77h-11.6c-2.84 0-5.53 1.29-7.31 3.51L47.69 94.73c-.57.71-.06 1.77.85 1.77h18.11c1.43.01 2.77-.64 3.66-1.75m51.39-66.21v41.75l-16.68-20.87 16.68-20.88zm404.37 66.19L453.65 4.11A4.68 4.68 0 00450 2.35h-13.84c-.98 0-1.77.79-1.77 1.77v90.62c0 .98.79 1.77 1.77 1.77h13.83c1.42 0 2.77-.65 3.65-1.76l24.91-31.17 24.91 31.17a4.68 4.68 0 003.65 1.76h18.11c.91 0 1.42-1.06.85-1.78m-57.33-45.31L452.05 70.3V28.54l16.69 20.88zM269.45 0c-27.3 0-49.43 22.13-49.43 49.43s22.13 49.43 49.43 49.43 49.43-22.13 49.43-49.43C318.89 22.13 296.75 0 269.45 0m0 82.06c-17.54 0-31.75-14.61-31.75-32.63 0-18.02 14.21-32.64 31.75-32.64S301.2 31.4 301.2 49.43c.01 18.02-14.21 32.63-31.75 32.63M583.38 4.12V68.4L532 4.11a4.68 4.68 0 00-3.65-1.76H514.5c-.97 0-1.77.79-1.77 1.77v43.67c0 1.06.36 2.09 1.03 2.92l14.71 18.41c.65.81 1.95.35 1.95-.68v-38l51.39 64.31a4.68 4.68 0 003.65 1.76h13.83c.98 0 1.77-.79 1.77-1.77V4.12c0-.97-.79-1.77-1.77-1.77h-14.14c-.98 0-1.77.8-1.77 1.77M410.62 23.76V4.12c0-.98-.79-1.77-1.77-1.77h-72.37c-.98 0-1.77.79-1.77 1.77v90.62c0 .98.79 1.77 1.77 1.77h14.14c.98 0 1.77-.79 1.77-1.77V19.16h40.55l-27.37 34.26c-.51.64-.51 1.56 0 2.21l31.27 39.13a4.68 4.68 0 003.65 1.76h18.11c.91 0 1.42-1.06.85-1.77l-32.14-40.21 22.28-27.84c.66-.85 1.03-1.88 1.03-2.94M162.39 96.51h41.96c1.42 0 2.77-.65 3.65-1.76l10.6-13.27c.57-.71.06-1.77-.85-1.77H178.3V4.12c0-.98-.79-1.77-1.77-1.77h-14.14c-.98 0-1.77.79-1.77 1.77v90.62c0 .97.8 1.77 1.77 1.77"
></path>
</svg>
<div class="betaText">
Am I in the beta?
</div>
<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>
@font-face {
font-family: "Valorant";
src: url("Valorant.otf");
}
@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%;
}
.logo {
fill: var(--v-white);
}
.betaText {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 400px;
text-align: center;
margin-bottom: 20px;
margin-top: 40px;
}
button {
font-family: "DIN Next LT Pro Bold";
font-weight: 400;
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);
}
button:hover {
color: var(--v-white);
}
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;
}
/* LABEL */
.label {
position: relative;
overflow: hidden;
margin: 0;
}
.label:before {
content: "";
height: 100%;
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}
/* 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);
}
/* 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;
background-color: var(--v-black);
transition: background-color 0.2s ease-in;
}
button:hover .label-text:after {
background-color: var(--v-white);
}
/* 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);
}
/* PRIMARY BUTTON */
.primary {
color: var(--v-black);
}
.primary .label::before {
background-color: var(--v-white);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.