1.faq-button {
2  width: 50px;
3  height: 50px;
4  border-radius: 50%;
5  border: none;
6  background-color: #ffe53b;
7  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
8  display: flex;
9  align-items: center;
10  justify-content: center;
11  cursor: pointer;
12  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
13  position: relative;
14}
15.faq-button svg {
16  height: 1.5em;
17  fill: white;
18}
19.faq-button:hover svg {
20  animation: jello-vertical 0.7s both;
21}
22@keyframes jello-vertical {
23  0% {
24    transform: scale3d(1, 1, 1);
25  }
26  30% {
27    transform: scale3d(0.75, 1.25, 1);
28  }
29  40% {
30    transform: scale3d(1.25, 0.75, 1);
31  }
32  50% {
33    transform: scale3d(0.85, 1.15, 1);
34  }
35  65% {
36    transform: scale3d(1.05, 0.95, 1);
37  }
38  75% {
39    transform: scale3d(0.95, 1.05, 1);
40  }
41  100% {
42    transform: scale3d(1, 1, 1);
43  }
44}
45
46.tooltip {
47  position: absolute;
48  top: -20px;
49  opacity: 0;
50  background-color: #ffe53b;
51  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
52  color: white;
53  padding: 5px 10px;
54  border-radius: 5px;
55  display: flex;
56  align-items: center;
57  justify-content: center;
58  transition-duration: 0.2s;
59  pointer-events: none;
60  letter-spacing: 0.5px;
61}
62
63.tooltip::before {
64  position: absolute;
65  content: "";
66  width: 10px;
67  height: 10px;
68  background-color: #ff2525;
69  background-size: 1000%;
70  background-position: center;
71  transform: rotate(45deg);
72  bottom: -15%;
73  transition-duration: 0.3s;
74}
75
76.faq-button:hover .tooltip {
77  top: -40px;
78  opacity: 1;
79  transition-duration: 0.3s;
80}
81