1.button {
2  width: 140px;
3  height: 40px;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  gap: 10px;
8  background: linear-gradient(to left,rgb(173, 154, 255),rgb(149, 110, 255));
9  border-radius: 30px;
10  color: rgb(255, 255, 255);
11  font-weight: 600;
12  border: none;
13  position: relative;
14  cursor: pointer;
15  transition-duration: .2s;
16  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);
17}
18
19.bell {
20  width: 13px;
21}
22
23.bell path {
24  fill: rgb(255, 255, 255);
25}
26
27.button:hover {
28  background: linear-gradient(to left,rgb(154, 131, 255),rgb(135, 91, 255));
29}
30
31.button:active {
32  transform: scale(0.97);
33  transition-duration: .2s;
34}
35
36.button:hover .bell {
37  animation: bellRing 0.9s both;
38}
39
40/* bell ringing animation keyframes*/
41@keyframes bellRing {
42  0%,
43  100% {
44    transform-origin: top;
45  }
46
47  15% {
48    transform: rotateZ(10deg);
49  }
50
51  30% {
52    transform: rotateZ(-10deg);
53  }
54
55  45% {
56    transform: rotateZ(5deg);
57  }
58
59  60% {
60    transform: rotateZ(-5deg);
61  }
62
63  75% {
64    transform: rotateZ(2deg);
65  }
66}
67