<!-- From Uiverse.io by vinodjangid07 -->
<button class="faq-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path
d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"
></path>
</svg>
<span class="tooltip">FAQ</span>
</button>
/* From Uiverse.io by vinodjangid07 */
.faq-button {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background-color: #ffe53b;
background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
position: relative;
}
.faq-button svg {
height: 1.5em;
fill: white;
}
.faq-button:hover svg {
animation: jello-vertical 0.7s both;
}
@keyframes jello-vertical {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(0.75, 1.25, 1);
}
40% {
transform: scale3d(1.25, 0.75, 1);
}
50% {
transform: scale3d(0.85, 1.15, 1);
}
65% {
transform: scale3d(1.05, 0.95, 1);
}
75% {
transform: scale3d(0.95, 1.05, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
.tooltip {
position: absolute;
top: -20px;
opacity: 0;
background-color: #ffe53b;
background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
color: white;
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition-duration: 0.2s;
pointer-events: none;
letter-spacing: 0.5px;
}
.tooltip::before {
position: absolute;
content: "";
width: 10px;
height: 10px;
background-color: #ff2525;
background-size: 1000%;
background-position: center;
transform: rotate(45deg);
bottom: -15%;
transition-duration: 0.3s;
}
.faq-button:hover .tooltip {
top: -40px;
opacity: 1;
transition-duration: 0.3s;
}