#e8e8e8
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
214 views
214 views
Comments
MIT License