1.button__click {
2  border: none;
3  cursor: pointer;
4  position: relative;
5  overflow: hidden;
6  text-transform: uppercase;
7  transition: box-shadow 400ms;
8  padding: 0.7em;
9  font-size: 1rem;
10  border-radius: 20px;
11  color: rgb(0, 0, 0, 0.75);
12  background: transparent;
13  transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
14}
15
16.button__click:hover {
17  animation: button__click__animation 5.5s infinite both;
18}
19
20.button__click__background {
21  transition: transform 1.5s;
22  z-index: -2;
23  position: absolute;
24  left: 0;
25  top: 0;
26  width: 200%;
27  height: 200%;
28  animation: button__click__background 10s infinite;
29  background-color: #99fff8;
30  background-image: radial-gradient(at 89% 76%, hsla(13,63%,73%,1) 0px, transparent 50%),
31  radial-gradient(at 69% 38%, hsla(217,85%,71%,1) 0px, transparent 50%),
32  radial-gradient(at 12% 8%, hsla(214,70%,64%,1) 0px, transparent 50%),
33  radial-gradient(at 53% 10%, hsla(339,64%,65%,1) 0px, transparent 50%),
34  radial-gradient(at 5% 67%, hsla(212,74%,70%,1) 0px, transparent 50%);
35}
36
37.button__click::before {
38  content: "";
39  width: 100%;
40  height: 100%;
41  position: absolute;
42  left: 0;
43  top: 0;
44  z-index: -1;
45  background: rgba(255, 255, 255, 0.295);
46}
47
48.button__click:focus {
49  box-shadow: 0px 0px 0px 2px #000;
50}
51
52@keyframes button__click__animation {
53  0%, 100% {
54    transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
55  }
56
57  50% {
58    transform: scale(0.9) perspective(500px) rotateX(-15deg) rotateY(15deg);
59  }
60}
61
62@keyframes button__click__background {
63  0%, 100% {
64    transform: translateX(0%);
65  }
66
67  25% {
68    transform: translateX(-50%);
69  }
70
71  50% {
72    transform: translateX(-50%) translateY(-50%);
73  }
74
75  75% {
76    transform: translateX(0%) translateY(-50%);
77  }
78}