1.wrapper {
2 perspective: 500px;
3 transform: rotatex(10deg);
4 animation: rotateAngle 6s linear infinite;
5 margin: auto;
6 width: auto;
7}
8
9button {
10 display: block;
11 position: relative;
12 margin: 0.5em 0;
13 padding: 0.8em 2.2em;
14 cursor: pointer;
15 background: #FFFFFF;
16 border: none;
17 border-radius: 0.4em;
18 text-transform: uppercase;
19 font-size: 19px;
20 font-family: "Work Sans", sans-serif;
21 font-weight: 500;
22 letter-spacing: 0.04em;
23 mix-blend-mode: color-dodge;
24 perspective: 500px;
25 transform-style: preserve-3d;
26}
27
28button:before, button:after {
29 --z: 0px;
30 position: absolute;
31 top: 0;
32 left: 0;
33 display: block;
34 content: "";
35 width: 100%;
36 height: 100%;
37 opacity: 0;
38 mix-blend-mode: inherit;
39 border-radius: inherit;
40 transform-style: preserve-3d;
41 transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));
42}
43
44button span {
45 mix-blend-mode: none;
46 display: block;
47}
48
49button:after {
50 background-color: #5D00FF;
51}
52
53button:before {
54 background-color: #FF1731;
55}
56
57button:hover {
58 background-color: #FFF65B;
59 transition: background 0.3s 0.1s;
60}
61
62button:hover:before {
63 --z: 0.04;
64 animation: translateWobble 2.2s ease forwards;
65}
66
67button:hover:after {
68 --z: -0.06;
69 animation: translateWobble 2.2s ease forwards;
70}
71
72@keyframes rotateAngle {
73 0% {
74  transform: rotateY(0deg) rotateX(10deg);
75  -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
76  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
77 }
78
79 25% {
80  transform: rotateY(20deg) rotateX(10deg);
81 }
82
83 50% {
84  transform: rotateY(0deg) rotateX(10deg);
85  -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
86  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
87 }
88
89 75% {
90  transform: rotateY(-20deg) rotateX(10deg);
91 }
92
93 100% {
94  transform: rotateY(0deg) rotateX(10deg);
95 }
96}
97
98@keyframes translateWobble {
99 0% {
100  opacity: 0;
101  transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));
102 }
103
104 16% {
105  transform: translate3d(calc(var(--z) * 160px), calc(var(--z) * 160px), calc(var(--z) * 160px));
106 }
107
108 28% {
109  opacity: 1;
110  transform: translate3d(calc(var(--z) * 70px), calc(var(--z) * 70px), calc(var(--z) * 70px));
111 }
112
113 44% {
114  transform: translate3d(calc(var(--z) * 130px), calc(var(--z) * 130px), calc(var(--z) * 130px));
115 }
116
117 59% {
118  transform: translate3d(calc(var(--z) * 85px), calc(var(--z) * 85px), calc(var(--z) * 85px));
119 }
120
121 73% {
122  transform: translate3d(calc(var(--z) * 110px), calc(var(--z) * 110px), calc(var(--z) * 110px));
123 }
124
125 88% {
126  opacity: 1;
127  transform: translate3d(calc(var(--z) * 90px), calc(var(--z) * 90px), calc(var(--z) * 90px));
128 }
129
130 100% {
131  opacity: 1;
132  transform: translate3d(calc(var(--z) * 100px), calc(var(--z) * 100px), calc(var(--z) * 100px));
133 }
134}