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