Tooltip by neerajbaniwal
#e8e8e8
1.wrapper { 2 --background: #62abff; 3 --icon-color: #414856; 4 --shape-color-01: #b8cbee; 5 --shape-color-02: #7691e8; 6 --shape-color-03: #fdd053; 7 --width: 90px; 8 --height: 90px; 9 --border-radius: var(--height); 10 width: var(--width); 11 height: var(--height); 12 position: relative; 13 border-radius: var(--border-radius); 14 display: flex; 15 justify-content: center; 16 align-items: center; 17} 18.wrapper .btn { 19 background: var(--background); 20 width: var(--width); 21 height: var(--height); 22 position: relative; 23 z-index: 3; 24 border-radius: var(--border-radius); 25 box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); 26 display: flex; 27 justify-content: center; 28 align-items: center; 29 -webkit-animation: plus-animation-reverse 0.5s ease-out forwards; 30 animation: plus-animation-reverse 0.5s ease-out forwards; 31} 32.wrapper .btn::before, 33.wrapper .btn::after { 34 content: ""; 35 display: block; 36 position: absolute; 37 border-radius: 4px; 38 background: #fff; 39} 40.wrapper .btn::before { 41 width: 4px; 42 height: 28px; 43} 44.wrapper .btn::after { 45 width: 28px; 46 height: 4px; 47} 48.wrapper .tooltip { 49 width: 90px; 50 height: 75px; 51 border-radius: 70px; 52 position: absolute; 53 background: #fff; 54 z-index: 2; 55 padding: 0 15px; 56 box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); 57 opacity: 0; 58 top: 0; 59 display: flex; 60 justify-content: space-around; 61 align-items: center; 62 transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in; 63} 64.wrapper .tooltip > svg { 65 width: 100%; 66 height: 26px; 67 display: flex; 68 justify-content: space-around; 69 align-items: center; 70 cursor: pointer; 71} 72.wrapper .tooltip > svg .icon { 73 fill: none; 74 stroke: var(--icon-color); 75 stroke-width: 2px; 76 stroke-linecap: round; 77 stroke-linejoin: round; 78 opacity: 0.4; 79 transition: opacity 0.3s ease; 80} 81.wrapper .tooltip > svg:hover .icon { 82 opacity: 1; 83} 84.wrapper .tooltip::after { 85 content: ""; 86 width: 20px; 87 height: 20px; 88 background: #fff; 89 border-radius: 3px; 90 position: absolute; 91 left: 50%; 92 margin-left: -10px; 93 bottom: -8px; 94 transform: rotate(45deg); 95 z-index: 0; 96} 97.wrapper > svg { 98 width: 300px; 99 height: 300px; 100 position: absolute; 101 z-index: 1; 102 transform: scale(0); 103} 104.wrapper > svg .shape { 105 fill: none; 106 stroke: none; 107 stroke-width: 3px; 108 stroke-linecap: round; 109 stroke-linejoin: round; 110 transform-origin: 50% 20%; 111} 112.wrapper input { 113 height: 100%; 114 width: 100%; 115 border-radius: var(--border-radius); 116 cursor: pointer; 117 position: absolute; 118 z-index: 5; 119 opacity: 0; 120} 121.wrapper input:checked ~ svg { 122 -webkit-animation: pang-animation 1.2s ease-out forwards; 123 animation: pang-animation 1.2s ease-out forwards; 124} 125.wrapper input:checked ~ svg .shape:nth-of-type(1) { 126 transform: translate(25px, 30%) rotate(40deg); 127} 128.wrapper input:checked ~ svg .shape:nth-of-type(2) { 129 transform: translate(-4px, 30%) rotate(80deg); 130} 131.wrapper input:checked ~ svg .shape:nth-of-type(3) { 132 transform: translate(12px, 30%) rotate(120deg); 133} 134.wrapper input:checked ~ svg .shape:nth-of-type(4) { 135 transform: translate(8px, 30%) rotate(160deg); 136} 137.wrapper input:checked ~ svg .shape:nth-of-type(5) { 138 transform: translate(21px, 30%) rotate(200deg); 139} 140.wrapper input:checked ~ svg .shape:nth-of-type(6) { 141 transform: translate(0px, 30%) rotate(240deg); 142} 143.wrapper input:checked ~ svg .shape:nth-of-type(7) { 144 transform: translate(17px, 30%) rotate(280deg); 145} 146.wrapper input:checked ~ svg .shape:nth-of-type(8) { 147 transform: translate(-3px, 30%) rotate(320deg); 148} 149.wrapper input:checked ~ svg .shape:nth-of-type(9) { 150 transform: translate(25px, 30%) rotate(360deg); 151} 152.wrapper input:checked ~ .btn { 153 -webkit-animation: plus-animation 0.5s ease-out forwards; 154 animation: plus-animation 0.5s ease-out forwards; 155} 156.wrapper input:checked ~ .tooltip { 157 width: 190px; 158 height: 70px; 159 -webkit-animation: stretch-animation 1s ease-out forwards 0.15s; 160 animation: stretch-animation 1s ease-out forwards 0.15s; 161 top: -90px; 162 opacity: 1; 163} 164 165@-webkit-keyframes pang-animation { 166 0% { 167 transform: scale(0); 168 opacity: 0; 169 } 170 40% { 171 transform: scale(1); 172 opacity: 1; 173 } 174 100% { 175 transform: scale(1.1); 176 opacity: 0; 177 } 178} 179 180@keyframes pang-animation { 181 0% { 182 transform: scale(0); 183 opacity: 0; 184 } 185 40% { 186 transform: scale(1); 187 opacity: 1; 188 } 189 100% { 190 transform: scale(1.1); 191 opacity: 0; 192 } 193} 194@-webkit-keyframes plus-animation { 195 0% { 196 transform: rotate(0) scale(1); 197 } 198 20% { 199 transform: rotate(60deg) scale(0.93); 200 } 201 55% { 202 transform: rotate(35deg) scale(0.97); 203 } 204 80% { 205 transform: rotate(48deg) scale(0.94); 206 } 207 100% { 208 transform: rotate(45deg) scale(0.95); 209 } 210} 211@keyframes plus-animation { 212 0% { 213 transform: rotate(0) scale(1); 214 } 215 20% { 216 transform: rotate(60deg) scale(0.93); 217 } 218 55% { 219 transform: rotate(35deg) scale(0.97); 220 } 221 80% { 222 transform: rotate(48deg) scale(0.94); 223 } 224 100% { 225 transform: rotate(45deg) scale(0.95); 226 } 227} 228@-webkit-keyframes plus-animation-reverse { 229 0% { 230 transform: rotate(45deg) scale(0.95); 231 } 232 20% { 233 transform: rotate(-15deg); 234 } 235 55% { 236 transform: rotate(10deg); 237 } 238 80% { 239 transform: rotate(-3deg); 240 } 241 100% { 242 transform: rotate(0) scale(1); 243 } 244} 245@keyframes plus-animation-reverse { 246 0% { 247 transform: rotate(45deg) scale(0.95); 248 } 249 20% { 250 transform: rotate(-15deg); 251 } 252 55% { 253 transform: rotate(10deg); 254 } 255 80% { 256 transform: rotate(-3deg); 257 } 258 100% { 259 transform: rotate(0) scale(1); 260 } 261} 262@-webkit-keyframes stretch-animation { 263 0% { 264 transform: scale(1, 1); 265 } 266 10% { 267 transform: scale(1.1, 0.9); 268 } 269 30% { 270 transform: scale(0.9, 1.1); 271 } 272 50% { 273 transform: scale(1.05, 0.95); 274 } 275 100% { 276 transform: scale(1, 1); 277 } 278} 279@keyframes stretch-animation { 280 0% { 281 transform: scale(1, 1); 282 } 283 10% { 284 transform: scale(1.1, 0.9); 285 } 286 30% { 287 transform: scale(0.9, 1.1); 288 } 289 50% { 290 transform: scale(1.05, 0.95); 291 } 292 100% { 293 transform: scale(1, 1); 294 } 295} 296 297.socials { 298 position: fixed; 299 display: block; 300 left: 20px; 301 bottom: 20px; 302} 303.socials > a { 304 display: block; 305 width: 30px; 306 opacity: 0.2; 307 transform: scale(var(--scale, 0.8)); 308 transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91); 309} 310.socials > a:hover { 311 --scale: 1; 312} 313
819 views
819 views
MIT License