Skip to content

Instantly share code, notes, and snippets.

@leandroruel

leandroruel/cyberpunkbuttons.html

Created February 27, 2020 17:20
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save leandroruel/4f0e6a7919ac6ef6459abd55bc40a12e to your computer and use it in GitHub Desktop.
Save leandroruel/4f0e6a7919ac6ef6459abd55bc40a12e to your computer and use it in GitHub Desktop.
Download ZIP
Cyberpunk 2077 Buttons CSS
Raw
cyberpunkbuttons.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Cyberpunk 2077 Buttons CSS</title>
</head>
<body>
<button class="btn">
<span class="btn__content">Get your copy now_</span>
<span class="btn__glitch"></span>
<span class="btn__label">r25</span>
</button>
</body>
</html>
Raw
style.css
@import url("https://fonts.googleapis.com/css?family=Barlow|Tomorrow:400,700&display=swap");
:root {
--yellow-color: #fcee09;
--red-color: #ff003c;
--black-color: #050a0e;
--blue-color: #00f0ff;
--white-color: #fafafa;
}
.btn {
width: 230px;
height: 60px;
border: 0;
outline: none;
background-color: var(--black-color);
cursor: pointer;
position: relative;
font-family: Tomorrow, sans-serif;
font-size: .85rem;
text-transform: uppercase;
color: var(--black-color);
clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
}
.btn__content {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background-color: var(--yellow-color);
clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
}
.btn--secondary {
background-color: var(--white-color);
}
.btn--secondary .btn__content {
background-color: var(--red-color);
color: var(--white-color);
}
.btn__label {
font-size: .40rem;
position: absolute;
bottom: -1px;
right: 8%;
padding: 0 5px;
background-color: var(--yellow-color);
z-index: 3;
border-left: 1px solid var(--blue-color);
}
.btn--secondary .btn__label {
background-color: var(--white-color);
color: var(--black-color);
}
.btn__glitch {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--yellow-color);
filter: drop-shadow(-2px 3px #67e3f3) drop-shadow(-1px -3px #02d8f3) drop-shadow(2px 1px #02d8f3);
}
.btn--secondary .btn__glitch {
background-color: var(--red-color);
border: 0 2px 2px 2px var(--blue-color);
}
.btn:hover .btn__glitch,
.btn:hover .btn__content::after,
.btn:focus .btn__glitch,
.btn:focus .btn__content::after {
display: block;
animation: glitch-animation 2s linear 0s infinite;
}
/* secret trick */
@keyframes glitch-animation {
0% {
opacity: 1;
transform: translateZ(0);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
2% {
clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
transform: translate(-5px);
}
6% {
clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
transform: translate(5px);
}
8% {
clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
transform: translate(-5px);
}
9% {
clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
transform: translate(0);
}
10% {
clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
transform: translate3d(5px, 0, 0);
}
13% {
clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
transform: translateZ(0);
}
13.1% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transform: translate3d(5px, 0, 0);
}
15% {
clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
transform: translate3d(5px, 0, 0);
}
20% {
clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
transform: translate3d(-5px, 0, 0);
}
20.1% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transform: translate3d(5px, 0, 0);
}
25% {
clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
transform: translate3d(5px, 0, 0);
}
30% {
clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
transform: translate3d(-5px, 0, 0);
}
30.1% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
35% {
clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
transform: translate(-5px);
}
40% {
clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
transform: translate(5px);
}
45% {
clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
transform: translate(-5px);
}
50% {
clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
transform: translate(0);
}
55% {
clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
transform: translate3d(5px, 0, 0);
}
60% {
clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
transform: translateZ(0);
opacity: 1;
}
60.1% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
opacity: 1;
}
to {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
opacity: 1;
}
}
@Slagrach
Copy link

Hello, where is this class btn--secondary?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment