1.button {
2  width: 200px;
3  height: 40px;
4  display: flex;
5  align-items: center;
6  justify-content: flex-start;
7  gap: 10px;
8  padding: 0px 15px;
9  background-color: rgb(66, 66, 66);
10  border-radius: 10px;
11  color: white;
12  border: none;
13  position: relative;
14  cursor: pointer;
15  transition-duration: .2s;
16}
17
18.bell {
19  width: 13px;
20}
21
22.bell path {
23  fill: rgb(0, 206, 62);
24}
25
26.arrow {
27  position: absolute;
28  right: 0;
29  width: 30px;
30  height: 100%;
31  font-size: 18px;
32  display: flex;
33  align-items: center;
34  justify-content: center;
35}
36
37.button:hover {
38  background-color: rgb(77, 77, 77);
39  transition-duration: .2s;
40}
41
42.button:hover .arrow {
43  animation: slide-right .6s ease-out both;
44}
45/* arrow animation */
46@keyframes slide-right {
47  0% {
48    transform: translateX(-10px);
49    opacity: 0;
50  }
51
52  100% {
53    transform: translateX(0);
54    opacity: 1;
55  }
56}
57
58.button:active {
59  transform: translate(1px , 1px);
60  transition-duration: .2s;
61}
62