Button by gharsh11032000

1.button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  color: #e8e8e8;
7  background-color: #212121;
8  width: 70px;
9  height: 70px;
10  font-size: 24px;
11  text-transform: uppercase;
12  border: 2px solid #212121;
13  border-radius: 50%;
14  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
15  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15),
16    2px 2px 2px rgba(0, 0, 0, 0.1),
17    -3px -3px 2px rgba(255, 255, 255, 0.05),
18    -2px -2px 1px rgba(255, 255, 255, 0.05);
19  overflow: hidden;
20  cursor: pointer;
21}
22
23.button .span {
24  position: relative;
25  z-index: 2;
26  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
27}
28
29.button::before {
30  content: "";
31  position: absolute;
32  background-color: #e8e8e8;
33  width: 150%;
34  height: 150%;
35  left: 0%;
36  bottom: 0%;
37  transform: translate(-100%, 100%) rotate(45deg);
38  border-radius: 15px;
39}
40
41.button:hover::before {
42  animation: shakeBack 0.6s forwards 0.6s;
43}
44
45.button:hover .span {
46  scale: 1.2;
47}
48
49.button:hover {
50  box-shadow: none;
51}
52
53.button:active {
54  scale: 0.95;
55}
56
57@keyframes shakeBack {
58  0% {
59    transform: translate(-100%, 100%) rotate(45deg);
60  }
61
62  50% {
63    transform: translate(15%, -15%) rotate(45deg);
64  }
65
66  100% {
67    transform: translate(-10%, 10%) rotate(45deg);
68  }
69}
70