Button by gharsh11032000

1.button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  gap: 5px;
7  padding: 15px 20px;
8  background-color: #212121;
9  border: none;
10  font: inherit;
11  color: #e8e8e8;
12  font-size: 20px;
13  font-weight: 600;
14  border-radius: 50px;
15  cursor: not-allowed;
16  overflow: hidden;
17  transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);
18}
19
20.button span {
21  position: relative;
22  z-index: 2;
23  display: flex;
24  align-items: center;
25}
26
27.button::before {
28  position: absolute;
29  content: '';
30  width: 100%;
31  height: 100%;
32  translate: 0 105%;
33  background-color: #F53844;
34  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
35}
36
37.button svg {
38  width: 32px;
39  height: 32px;
40  fill: #F53844;
41  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
42}
43
44.button:hover {
45  animation: shake 0.2s linear 1;
46}
47
48.button:hover::before {
49  translate: 0 0;
50}
51
52.button:hover svg {
53  fill: #e8e8e8;
54}
55
56@keyframes shake {
57  0% {
58    rotate: 0deg;
59  }
60
61  33% {
62    rotate: 10deg;
63  }
64
65  66% {
66    rotate: -10deg;
67  }
68
69  100% {
70    rotate: 10deg;
71  }
72}
73