Netbyzz

+91 91067 67818

#A088
Hover for Social

HTML :

<!-- CODE = #A088  -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NETBYZZ A088</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main">
      <a href="https://www.instagram.com/">
        <div class="card">
          <svg
            class="instagram"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0,0,256,256"
            width="30px"
            height="30px"
            fill-rule="nonzero"
          >
            <g
              fill-rule="nonzero"
              stroke="none"
              stroke-width="1"
              stroke-linecap="butt"
              stroke-linejoin="miter"
              stroke-miterlimit="10"
              stroke-dasharray=""
              stroke-dashoffset="0"
              font-family="none"
              font-weight="none"
              font-size="none"
              text-anchor="none"
              style="mix-blend-mode: normal"
            >
              <g transform="scale(8,8)">
                <path
                  d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"
                ></path>
              </g>
            </g>
          </svg>
        </div>
      </a>
      <div class="card">
        <svg
          class="twitter"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 48 48"
          width="30px"
          height="30px"
        >
          <path
            d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
          ></path>
        </svg>
      </div>
      <div class="card">
        <svg
          class="dribble"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 40 40"
          width="30px"
          height="30px"
        >
          <path
            d="M20,38.5C9.799,38.5,1.5,30.201,1.5,20S9.799,1.5,20,1.5S38.5,9.799,38.5,20S30.201,38.5,20,38.5z"
          ></path>
          <path
            fill="#ea4c89"
            d="M20,2c9.925,0,18,8.075,18,18s-8.075,18-18,18S2,29.925,2,20S10.075,2,20,2 M20,1 C9.507,1,1,9.507,1,20s8.507,19,19,19s19-8.507,19-19S30.493,1,20,1L20,1z"
          ></path>
          <path
            fill="none"
            stroke="#ea4c89"
            stroke-miterlimit="10"
            d="M28.352 36.914c0 0-3.032-21.087-15.63-34.292M1.269 17.848c0 0 24.2 2.117 32.075-11.102M7.804 34.152c0 0 8.624-19.807 31.058-12.194"
          ></path>
        </svg>
      </div>
      <div class="card">
        <svg
          class="codepen"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 50 50"
          width="30px"
          height="30px"
        >
          <path
            d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z"
          ></path>
        </svg>
      </div>
      <div class="card">
        <svg class="netbyzz" width="23px" height="23px" viewBox="0 0 454 453" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_d_5146_261)">
          <path d="M2.73761 73.4548C2.40285 78.5838 2.24275 86.4449 2.25731 97.0379C2.34087 159.149 2.28334 221.261 2.19512 283.371C4.37628 249.488 24.5952 225.234 50.2815 212.416C50.0777 212.345 49.9717 212.202 49.9634 211.985C49.8511 209.407 49.796 206.978 49.7981 204.698C49.8293 163.239 49.7866 121.78 49.6702 80.3212C49.664 78.0334 50.0912 75.1932 50.8304 72.8743C54.1011 62.6245 60.7006 55.3679 70.6289 51.1045C76.5527 48.5597 82.8039 47.4871 89.3826 47.8866C91.5575 48.0177 93.591 48.3974 95.4831 49.0258C102.85 51.4728 109.605 56.8505 115.023 62.2937C136.112 83.4923 158.955 107.244 172.335 120.652C177.219 125.546 184.826 132.394 192.046 139.513C199.363 146.729 204.802 152.144 208.364 155.759C230.707 178.422 253.149 200.987 275.688 223.452C283.329 231.068 292.317 237.385 301.802 242.488C307.684 245.651 313.515 248.018 319.296 249.589C322.293 250.4 326.597 251.539 330.38 252.123C332.772 252.494 335.292 252.934 337.556 253.184C344.439 253.946 350.884 254.055 356.893 253.512C359.149 253.308 362.203 252.877 366.053 252.22C376.346 250.463 386.488 246.904 395.832 242.27C396.656 241.862 397.747 241.27 399.107 240.494C400.617 239.635 401.989 238.718 403.654 238.14C403.741 238.11 403.834 238.101 403.925 238.112C404.016 238.124 404.103 238.157 404.179 238.208C433.509 222.34 447.509 201.852 451.978 168.502C451.979 152.058 451.98 134.681 451.981 116.37C451.981 105.911 451.95 95.3931 451.554 83.9105C451.226 74.5253 450.228 65.2525 447.072 56.607C442.073 42.9241 433.985 30.037 422.595 20.6455C418.379 17.1686 414.87 14.5375 412.069 12.7522C406.85 9.42514 400.948 6.57452 394.363 4.20039C392.376 3.48254 390.386 2.88536 388.394 2.40887C380.792 0.588224 373.433 -0.200377 366.315 0.0430695C361.492 0.207448 356.219 1.03558 350.497 2.52748C337.94 5.80464 326.856 11.3602 317.243 19.1942C301.621 31.9346 290.861 50.3554 287.524 70.265C287.112 72.7265 286.892 74.6221 286.863 75.9517C286.715 82.9097 286.676 89.9675 286.747 97.1253C286.749 97.1848 286.764 97.2424 286.791 97.2938C286.98 97.6413 287.338 97.6538 287.864 97.3313C290.608 95.6459 293.375 93.6484 296.294 92.5123C298.041 91.8319 299.822 91.2587 301.64 90.7926C303.062 90.4264 304.614 90.2027 306.296 90.1215C310.157 89.9363 313.453 89.9956 316.183 90.2994C320.753 90.8071 325.135 92.454 329.329 95.2401C330.745 96.1796 331.949 96.8226 333.334 97.4749C333.393 97.5031 333.458 97.5173 333.523 97.5162C333.589 97.5152 333.653 97.4989 333.712 97.4688C333.77 97.4386 333.821 97.3953 333.861 97.3422C333.9 97.2892 333.927 97.2278 333.939 97.1628C334.007 96.7726 334.123 96.3076 334.113 95.9112C334.013 91.937 333.944 87.9628 333.904 83.9885C333.881 81.6997 333.966 79.568 334.157 77.5934C334.459 74.5097 335.451 71.9036 336.783 68.8387C343.326 53.7699 358.428 44.7811 374.942 47.793C388.94 50.3461 399.824 60.808 403.28 74.5066C404.275 78.4454 404.334 82.4093 404.35 86.7195C404.41 103.549 404.419 120.377 404.375 137.204C404.356 144.775 404.275 150.367 404.132 153.98C403.944 158.742 403.215 163.917 401.649 168.502C398.505 177.706 392.823 186.789 385.206 192.962C378.559 198.351 371.07 202.097 362.738 204.198C361.534 204.502 359.855 204.843 357.701 205.222C353.962 205.881 349.845 206.807 346.433 206.758C344.21 206.726 342.017 206.443 339.855 205.909C335.579 204.857 331.347 203.877 327.18 202.425C320.287 200.025 314.567 195.884 309.493 190.871C300.947 182.425 291.123 172.388 280.824 162.085C242.791 124.032 204.819 85.9184 166.908 47.743C155.607 36.3635 148.254 29.0268 144.848 25.733C140.927 21.9398 138.176 19.4377 136.596 18.2267C126.488 10.4832 114.33 4.49378 101.833 1.94071C95.4332 0.634 89.3795 0.0243429 83.672 0.111734C74.2312 0.258426 64.5097 2.50251 55.3902 5.99503C43.786 10.4374 33.6881 17.2092 25.0967 26.3104C19.4038 32.3404 14.5633 39.4815 10.5753 47.7337C7.81408 53.4453 5.76602 58.9718 4.43115 64.313C3.44144 68.2789 2.87692 71.3262 2.73761 73.4548Z" fill="white"/>
          <path d="M52.5208 281.78C54.4545 276.561 56.6783 271.917 59.8657 267.498C64.7811 260.684 71.5677 254.879 78.8159 250.7C80.5729 249.686 82.4535 248.814 84.4579 248.081C89.2505 246.329 94.0307 245.105 98.7984 244.408C108.13 243.044 117.901 244.092 126.709 247.685C130.848 249.373 134.6 251.237 137.759 253.568C140.223 255.385 142.781 257.611 145.432 260.247C149.471 264.262 153.477 268.306 157.484 272.35L157.486 272.352L157.493 272.359C160.323 275.215 163.153 278.072 165.994 280.918C178.627 293.572 191.056 305.998 203.479 318.418C229.951 344.883 256.394 371.319 284.704 399.858C286.095 401.258 287.577 402.718 289.149 404.237C293.968 408.895 298.266 413.312 302.533 417.698L302.536 417.7C305.253 420.492 307.957 423.271 310.775 426.091C315.948 431.265 321.694 435.689 328.013 439.362C329.791 440.396 331.779 441.389 333.979 442.342C344.384 446.859 355.883 449.736 367.173 449.973C388.066 450.41 408.585 443.366 424.12 429.134C433.065 420.938 439.939 411.406 444.742 400.538C447.808 393.6 450.01 386.184 450.955 378.653C452.03 370.092 452.014 362.152 451.995 353.062V353.047C451.993 352.041 451.991 351.021 451.99 349.985C451.978 315.073 451.974 254.579 451.978 168.502C447.509 201.852 433.509 222.34 404.179 238.208C404.255 238.259 404.318 238.327 404.364 238.407C404.409 238.487 404.435 238.576 404.44 238.668C404.523 240.196 404.486 242.022 404.456 243.528L404.456 243.534C404.443 244.197 404.431 244.798 404.431 245.285C404.456 277.532 404.479 309.779 404.5 342.027C404.508 354.536 404.389 364.264 404.144 371.209C403.798 380.966 397.987 390.07 390.125 395.579C383.36 400.316 374.777 403.151 366.471 402.632C362.365 402.376 358.617 401.534 355.228 400.104C350.263 398.01 346.561 395.082 342.728 391.228C298.224 346.5 253.664 301.827 209.05 257.207C200.251 248.406 191.468 239.587 182.702 230.753C175.441 223.437 167.604 216.845 158.812 211.436C146.676 203.97 132.52 199.317 118.522 197.123C117.487 196.96 116.084 196.831 114.315 196.736C112.391 196.632 108.595 196.628 102.925 196.726C100.586 196.766 98.5104 196.875 96.6994 197.054C89.131 197.803 82.0991 199.196 75.6035 201.233C67.534 203.763 59.3969 207.426 51.1922 212.223C51.0363 212.314 50.8959 212.376 50.7711 212.407C50.5715 212.457 50.4083 212.46 50.2815 212.416C24.5952 225.234 4.37628 249.488 2.19512 283.371C2.1894 287.395 2.18356 291.42 2.17762 295.444C2.15807 308.677 2.13746 321.91 2.11685 335.142L2.11685 335.143C2.10327 343.862 2.08969 352.581 2.07641 361.3C2.06082 371.712 3.08692 380.678 6.06232 390.404C7.99913 396.73 10.8435 402.898 13.9593 408.725C14.9552 410.585 16.052 412.349 17.2497 414.018C21.2574 419.599 25.7142 425.164 30.9945 429.68C39.9768 437.358 50.3563 443.041 61.7059 446.328C63.8516 446.95 65.8592 447.493 67.7284 447.957C76.7575 450.192 85.6587 450.454 94.8843 449.415C98.7225 448.984 102.235 448.328 105.423 447.445C109.91 446.203 112.745 445.368 113.928 444.939C125.814 440.644 136.546 432.839 145.382 423.441C156.659 411.44 164.329 395.835 166.581 379.383C166.811 377.685 167.004 375.613 167.158 373.166C167.59 366.275 167.714 359.394 167.529 352.523C167.528 352.492 167.518 352.462 167.502 352.436C167.485 352.411 167.462 352.39 167.434 352.376C167.407 352.363 167.377 352.357 167.347 352.36C167.317 352.363 167.288 352.374 167.264 352.392C164.064 354.726 160.72 356.718 157.006 358.032C153.808 359.162 150.516 359.925 147.131 360.323C145.232 360.547 144.122 360.657 142.466 360.482C136.608 359.866 131.112 358.339 125.976 355.9C124.88 355.379 123.738 354.706 122.589 354.03L122.588 354.029C122.003 353.684 121.415 353.338 120.83 353.01C120.787 352.986 120.739 352.973 120.689 352.973C120.64 352.973 120.592 352.986 120.549 353.01C120.506 353.034 120.47 353.069 120.444 353.111C120.419 353.153 120.404 353.201 120.403 353.25C120.238 358.184 120.144 363.158 120.119 368.172C120.082 375.232 117.895 381.871 114.106 387.76C112.985 389.502 111.672 391.078 110.167 392.489C105.638 396.737 100.504 400.142 94.432 401.584C92.3133 402.085 90.495 402.445 88.9771 402.664C82.1999 403.631 75.1232 402.545 69.0789 399.271C59.1609 393.9 52.9356 385.104 50.6402 374.04C50.1536 371.695 49.8979 369.686 49.8729 368.013C49.6957 356.142 49.7003 344.268 49.7048 332.395V332.395C49.7074 325.669 49.71 318.944 49.6796 312.22C49.6463 305.131 49.6983 299.539 49.8355 295.444C49.9914 290.739 50.8866 286.185 52.5208 281.78Z" fill="white"/>
          </g>
          <ellipse cx="144.029" cy="322.506" rx="23.3332" ry="23.3325" fill="white"/>
          <ellipse cx="309.921" cy="127.567" rx="23.3332" ry="23.3325" fill="white"/>
          <defs>
          <filter id="filter0_d_5146_261" x="0.795705" y="0" width="452.409" height="452.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <feOffset dy="1.20429"/>
          <feGaussianBlur stdDeviation="0.602147"/>
          <feComposite in2="hardAlpha" operator="out"/>
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5146_261"/>
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5146_261" result="shape"/>
          </filter>
          </defs>
          </svg>          
      </div>
      <div class="card">
        <svg
          class="discord"
          height="30px"
          width="30px"
          viewBox="0 0 48 48"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
          ></path>
        </svg>
      </div>
      <div class="card">
        <svg
          class="github"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 30 30"
          width="30px"
          height="30px"
        >
          <path
            d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"
          ></path>
        </svg>
      </div>
      <div class="card">
        <svg
          class="telegram"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 48 48"
          width="30px"
          height="30px"
        >
          <path d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z"></path>
          <path
            fill="#fff"
            d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z"
          ></path>
          <path
            fill="#b0bec5"
            d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z"
          ></path>
          <path
            fill="#cfd8dc"
            d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z"
          ></path>
        </svg>
      </div>
      <div class="card">
        <svg
          class="reddit"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.1"
          width="30"
          height="30"
          viewBox="0 0 256 256"
          xml:space="preserve"
        >
          <defs></defs>
          <g
            style="
              stroke: none;
              border-radius: 50%;
              stroke-width: 0;
              stroke-dasharray: none;
              stroke-linecap: butt;
              stroke-linejoin: miter;
              stroke-miterlimit: 10;
              fill: none;
              fill-rule: nonzero;
              opacity: 1;
            "
            transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
          >
            <circle
              cx="45"
              cy="45"
              r="45"
              style="
                stroke: none;
                stroke-width: 0;
                stroke-dasharray: none;
                stroke-linecap: butt;
                stroke-linejoin: miter;
                stroke-miterlimit: 10;
                fill-rule: nonzero;
                opacity: 1;
              "
              transform="matrix(1 0 0 1 0 0)"
            ></circle>
            <path
              d="M 75.011 45 c -0.134 -3.624 -3.177 -6.454 -6.812 -6.331 c -1.611 0.056 -3.143 0.716 -4.306 1.823 c -5.123 -3.49 -11.141 -5.403 -17.327 -5.537 l 2.919 -14.038 l 9.631 2.025 c 0.268 2.472 2.483 4.262 4.955 3.993 c 2.472 -0.268 4.262 -2.483 3.993 -4.955 s -2.483 -4.262 -4.955 -3.993 c -1.421 0.145 -2.696 0.973 -3.4 2.204 L 48.68 17.987 c -0.749 -0.168 -1.499 0.302 -1.667 1.063 c 0 0.011 0 0.011 0 0.022 l -3.322 15.615 c -6.264 0.101 -12.36 2.025 -17.55 5.537 c -2.64 -2.483 -6.801 -2.36 -9.284 0.291 c -2.483 2.64 -2.36 6.801 0.291 9.284 c 0.515 0.481 1.107 0.895 1.767 1.186 c -0.045 0.66 -0.045 1.32 0 1.98 c 0 10.078 11.745 18.277 26.23 18.277 c 14.485 0 26.23 -8.188 26.23 -18.277 c 0.045 -0.66 0.045 -1.32 0 -1.98 C 73.635 49.855 75.056 47.528 75.011 45 z M 30.011 49.508 c 0 -2.483 2.025 -4.508 4.508 -4.508 c 2.483 0 4.508 2.025 4.508 4.508 s -2.025 4.508 -4.508 4.508 C 32.025 53.993 30.011 51.991 30.011 49.508 z M 56.152 62.058 v -0.179 c -3.199 2.405 -7.114 3.635 -11.119 3.468 c -4.005 0.168 -7.919 -1.063 -11.119 -3.468 c -0.425 -0.515 -0.347 -1.286 0.168 -1.711 c 0.447 -0.369 1.085 -0.369 1.544 0 c 2.707 1.98 6.007 2.987 9.362 2.83 c 3.356 0.179 6.667 -0.783 9.407 -2.74 c 0.492 -0.481 1.297 -0.47 1.779 0.022 C 56.655 60.772 56.644 61.577 56.152 62.058 z M 55.537 54.34 c -0.078 0 -0.145 0 -0.224 0 l 0.034 -0.168 c -2.483 0 -4.508 -2.025 -4.508 -4.508 s 2.025 -4.508 4.508 -4.508 s 4.508 2.025 4.508 4.508 C 59.955 52.148 58.02 54.239 55.537 54.34 z"
              style="
                stroke: none;
                stroke-width: 1;
                stroke-dasharray: none;
                stroke-linecap: butt;
                stroke-linejoin: miter;
                stroke-miterlimit: 10;
                fill-rule: nonzero;
                opacity: 1;
              "
              transform="matrix(1 0 0 1 0 0)"
              stroke-linecap="round"
            ></path>
          </g>
        </svg>
      </div>
      <p class="text">HOVER<br /><br />FOR<br /><br />SOCIAL</p>
      <div class="main_back"></div>
    </div>
  </body>
</html>

CSS :

body {
    background-color: #212121;
}

.main_back {
    position: absolute;
    border-radius: 10px;
    transform: rotate(90deg);
    width: 11em;
    height: 11em;
    background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
    z-index: -2;
    box-shadow: inset 0px 0px 180px 5px #ffffff;
}

.main {
    margin: auto;
    margin-top: 20%;
    display: flex;
    flex-wrap: wrap;
    width: 14em;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.card {
    width: 60px;
    height: 60px;
    border-top-left-radius: 10px;
    background: lightgrey;
    transition: 0.4s ease-in-out, 0.2s background-color ease-in-out,
        0.2s background-image ease-in-out;
    background: rgba(255, 255, 255, 0.596);
    backdrop-filter: blur(5px);
    border: 1px solid transparent;
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card .instagram {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #cc39a4;
}

.card:nth-child(2) {
    border-radius: 0px;
}

.card:nth-child(2) .twitter {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #03a9f4;
}

.card:nth-child(3) {
    border-top-right-radius: 10px;
    border-top-left-radius: 0px;
}

.card:nth-child(3) .dribble {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #ffb5d2;
}

.card:nth-child(4) {
    border-radius: 0px;
}

.card:nth-child(4) .codepen {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: black;
}

.card:nth-child(5) {
    border-radius: 0px;
}

.card:nth-child(5) .netbyzz {
    position: absolute;
    margin-left: 0.2em;
    margin-top: 0.2em;
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.card:nth-child(6) {
    border-radius: 0px;
}

.card:nth-child(6) .discord {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #8c9eff;
}

.card:nth-child(7) {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 0px;
}

.card:nth-child(7) .github {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: black;
}

.card:nth-child(8) {
    border-radius: 0px;
}

.card:nth-child(8) .telegram {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #29b6f6;
}

.card:nth-child(9) {
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
}

.card:nth-child(9) .reddit {
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.main:hover {
    width: 14em;
    cursor: pointer;
}

.main:hover .main_back {
    opacity: 0;
}

.main:hover .card {
    margin: 0.2em;
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
}

.main:hover .card:nth-child(5) {
    border: transparent;
}

.main:hover .text {
    opacity: 0;
    z-index: -3;
}

.main:hover .instagram {
    opacity: 1;
}

.main:hover .twitter {
    opacity: 1;
}

.main:hover .dribble {
    opacity: 1;
}

.main:hover .codepen {
    opacity: 1;
}

.main:hover .netbyzz {
    opacity: 1;
}

.main:hover .discord {
    opacity: 1;
}

.main:hover .github {
    opacity: 1;
}

.main:hover .telegram {
    opacity: 1;
}

.main:hover .reddit {
    opacity: 1;
}

.card:nth-child(1):hover {
    background-color: #cc39a4;
}

.card:nth-child(1):hover .instagram {
    fill: white;
}

.card:nth-child(2):hover {
    background-color: #03a9f4;
}

.card:nth-child(2):hover .twitter {
    fill: white;
}

.card:nth-child(3):hover {
    background-color: #ffb5d2;
}

.card:nth-child(3):hover .dribble {
    fill: white;
}

.card:nth-child(4):hover {
    background-color: #1e1f26;
}

.card:nth-child(4):hover .codepen {
    fill: white;
}

.card:nth-child(5):hover {
    animation: backgroundIMG 0.1s;
    animation-fill-mode: forwards;
}

.card:nth-child(5):hover .netbyzz #paint0_linear_501_142 stop {
    stop-color: white;
}

.card:nth-child(5):hover .netbyzz #paint1_linear_501_142 stop {
    stop-color: white;
}

.card:nth-child(5):hover .netbyzz #paint2_linear_501_142 stop {
    stop-color: white;
}

@keyframes backgroundIMG {
    100% {
        background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
    }
}

.card:nth-child(6):hover {
    background-color: #8c9eff;
}

.card:nth-child(6):hover .discord {
    fill: white;
}

.card:nth-child(7):hover {
    background-color: black;
}

.card:nth-child(7):hover .github {
    fill: white;
}

.card:nth-child(8):hover {
    background-color: #29b6f6;
}

.card:nth-child(8):hover .telegram>path:nth-of-type(1) {
    fill: white;
}

.card:nth-child(8):hover .telegram>path:nth-of-type(2) {
    fill: #29b6f6;
}

.card:nth-child(8):hover .telegram>path:nth-of-type(3) {
    fill: #29b6f6;
}

.card:nth-child(9):hover {
    background-color: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit>g circle {
    fill: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit>g path {
    fill: white;
}

.text {
    position: absolute;
    font-size: 0.7em;
    transition: 0.4s ease-in-out;
    color: black;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.33em;
    z-index: 3;
}

Source Code

Download Now