1.button {
2  width: 120px;
3  height: 30px;
4  display: flex;
5  align-items: center;
6  justify-content: flex-start;
7  gap: 12px;
8  cursor: pointer;
9  border: 3px solid rgb(255, 239, 94);
10  background-color: rgb(255, 239, 94);
11  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
12}
13
14.text {
15  width: 70%;
16  height: 100%;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  background-color: rgb(27, 27, 27);
21  color: white;
22}
23
24.arrow path {
25  fill: rgb(19, 19, 19);
26}
27
28.button:hover .arrow {
29  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
30}
31
32@keyframes slide-in-left {
33  0% {
34    transform: translateX(-8px);
35    opacity: 0;
36  }
37
38  100% {
39    transform: translateX(0px);
40    opacity: 1;
41  }
42}
43
44.button:active {
45  transform: scale(0.97);
46}