Social Media Buttons

social-buttons.html

<div>
  <style>
    .social-btn-content {
      background: #0099cc;
      width: 40px;
      height: 40px;
      text-decoration: none;
      border-radius: 100%;
    }
  </style>
  <div style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
    <div style="padding: 5px;">
      <a class="social-btn" href="" target="_blank" rel="noopener noreferrer">
        <div class="social-btn-content" style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
          <svg width="30" height="30" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M47.43 9.765C47.43 9.39502 47.283 9.0402 47.0214 8.77858C46.7598 8.51697 46.405 8.37 46.035 8.37H39.06C35.5477 8.19504 32.109 9.41734 29.4951 11.7698C26.8812 14.1223 25.3047 17.4138 25.11 20.925V28.458H18.135C17.765 28.458 17.4102 28.605 17.1486 28.8666C16.887 29.1282 16.74 29.483 16.74 29.853V37.107C16.74 37.477 16.887 37.8318 17.1486 38.0934C17.4102 38.355 17.765 38.502 18.135 38.502H25.11V57.195C25.11 57.565 25.257 57.9198 25.5186 58.1814C25.7802 58.443 26.135 58.59 26.505 58.59H34.875C35.245 58.59 35.5998 58.443 35.8614 58.1814C36.123 57.9198 36.27 57.565 36.27 57.195V38.502H43.5798C43.89 38.5065 44.1929 38.4074 44.4405 38.2204C44.6881 38.0334 44.8663 37.7693 44.9469 37.4697L46.9557 30.2157C47.0112 30.0096 47.0187 29.7935 46.9775 29.584C46.9363 29.3746 46.8477 29.1773 46.7183 29.0075C46.5889 28.8378 46.4223 28.6999 46.2313 28.6046C46.0403 28.5094 45.83 28.4592 45.6165 28.458H36.27V20.925C36.3394 20.2344 36.6637 19.5945 37.1796 19.1302C37.6955 18.6659 38.3659 18.4105 39.06 18.414H46.035C46.405 18.414 46.7598 18.267 47.0214 18.0054C47.283 17.7438 47.43 17.389 47.43 17.019V9.765Z" fill="white"/>
          </svg>          
        </div>
      </a>
    </div>
    <div style="padding: 5px;">
      <a class="social-btn" href="" target="_blank" rel="noopener noreferrer">
        <div class="social-btn-content" style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
          <svg width="20" height="20" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M33.4875 16.3087C23.9868 16.3087 16.3236 23.9719 16.3236 33.4725C16.3236 42.9732 23.9868 50.6364 33.4875 50.6364C42.9881 50.6364 50.6513 42.9732 50.6513 33.4725C50.6513 23.9719 42.9881 16.3087 33.4875 16.3087ZM33.4875 44.6313C27.3479 44.6313 22.3287 39.627 22.3287 33.4725C22.3287 27.318 27.333 22.3138 33.4875 22.3138C39.642 22.3138 44.6462 27.318 44.6462 33.4725C44.6462 39.627 39.627 44.6313 33.4875 44.6313ZM55.3568 15.6066C55.3568 17.8323 53.5643 19.61 51.3534 19.61C49.1277 19.61 47.35 17.8174 47.35 15.6066C47.35 13.3957 49.1426 11.6032 51.3534 11.6032C53.5643 11.6032 55.3568 13.3957 55.3568 15.6066ZM66.7247 19.6697C66.4708 14.307 65.2458 9.55664 61.3171 5.64286C57.4034 1.72908 52.653 0.504161 47.2903 0.235275C41.7632 -0.078425 25.1968 -0.078425 19.6697 0.235275C14.3219 0.489223 9.57158 1.71415 5.64286 5.62793C1.71415 9.54171 0.504161 14.292 0.235275 19.6548C-0.078425 25.1819 -0.078425 41.7482 0.235275 47.2753C0.489223 52.6381 1.71415 57.3884 5.64286 61.3022C9.57158 65.216 14.307 66.4409 19.6697 66.7098C25.1968 67.0235 41.7632 67.0235 47.2903 66.7098C52.653 66.4558 57.4034 65.2309 61.3171 61.3022C65.2309 57.3884 66.4558 52.6381 66.7247 47.2753C67.0384 41.7482 67.0384 25.1968 66.7247 19.6697ZM59.5843 53.2057C58.4191 56.1336 56.1635 58.3893 53.2207 59.5694C48.814 61.3171 38.3573 60.9138 33.4875 60.9138C28.6177 60.9138 18.146 61.3022 13.7542 59.5694C10.8264 58.4042 8.57073 56.1486 7.39062 53.2057C5.64286 48.799 6.04619 38.3423 6.04619 33.4725C6.04619 28.6027 5.6578 18.1311 7.39062 13.7393C8.55579 10.8114 10.8114 8.55579 13.7542 7.37568C18.161 5.62793 28.6177 6.03125 33.4875 6.03125C38.3573 6.03125 48.8289 5.64286 53.2207 7.37568C56.1486 8.54085 58.4042 10.7965 59.5843 13.7393C61.3321 18.146 60.9287 28.6027 60.9287 33.4725C60.9287 38.3423 61.3321 48.8139 59.5843 53.2057Z" fill="white"/>
          </svg>
        </div>
      </a>
    </div>
    <div style="padding: 5px;">
      <a class="social-btn" href="" target="_blank" rel="noopener noreferrer">
        <div class="social-btn-content" style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
          <svg width="25" height="25" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M42.2685 23.436C40.1301 23.4287 38.0113 23.843 36.0332 24.6554C34.0551 25.4678 32.2567 26.6623 30.7407 28.1705C29.2247 29.6787 28.021 31.471 27.1985 33.4448C26.3759 35.4187 25.9507 37.5354 25.947 39.6738V56.079C25.947 56.745 26.2116 57.3836 26.6825 57.8545C27.1534 58.3254 27.792 58.59 28.458 58.59H34.317C34.983 58.59 35.6216 58.3254 36.0925 57.8545C36.5634 57.3836 36.828 56.745 36.828 56.079V39.6738C36.8274 38.9132 36.9872 38.1611 37.2968 37.4664C37.6064 36.7718 38.059 36.1501 38.6249 35.6421C39.1909 35.134 39.8576 34.751 40.5815 34.5178C41.3055 34.2847 42.0704 34.2068 42.8265 34.2891C44.1825 34.4599 45.4286 35.1224 46.3285 36.1509C47.2285 37.1794 47.7197 38.5025 47.709 39.8691V56.079C47.709 56.745 47.9735 57.3836 48.4445 57.8545C48.9154 58.3254 49.554 58.59 50.22 58.59H56.079C56.745 58.59 57.3836 58.3254 57.8545 57.8545C58.3254 57.3836 58.59 56.745 58.59 56.079V39.6738C58.5863 37.5354 58.1611 35.4187 57.3385 33.4448C56.516 31.471 55.3123 29.6787 53.7963 28.1705C52.2803 26.6623 50.4819 25.4678 48.5038 24.6554C46.5257 23.843 44.4069 23.4287 42.2685 23.436Z" fill="white"/>
            <path d="M18.414 25.947H10.881C9.49421 25.947 8.37 27.0712 8.37 28.458V56.079C8.37 57.4658 9.49421 58.59 10.881 58.59H18.414C19.8008 58.59 20.925 57.4658 20.925 56.079V28.458C20.925 27.0712 19.8008 25.947 18.414 25.947Z" fill="white"/>
            <path d="M14.6475 20.925C18.1145 20.925 20.925 18.1145 20.925 14.6475C20.925 11.1805 18.1145 8.37 14.6475 8.37C11.1805 8.37 8.37 11.1805 8.37 14.6475C8.37 18.1145 11.1805 20.925 14.6475 20.925Z" fill="white"/>
          </svg>   
        </div>
      </a>
    </div>
    <div style="padding: 5px;">
      <a class="social-btn" href="" target="_blank" rel="noopener noreferrer">
        <div class="social-btn-content" style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
          <svg width="25" height="25" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.5432 55.8C26.6688 55.938 30.7801 55.2477 34.6343 53.7697C38.4885 52.2918 42.0074 50.0562 44.9829 47.1951C47.9584 44.3341 50.3302 40.9056 51.9581 37.1123C53.586 33.3189 54.437 29.2378 54.4608 25.11C56.3514 22.7703 57.7553 20.0764 58.59 17.1864C58.6523 16.9581 58.6473 16.7166 58.5755 16.4911C58.5038 16.2655 58.3683 16.0655 58.1856 15.9152C58.0028 15.7648 57.7804 15.6705 57.5453 15.6436C57.3101 15.6167 57.0722 15.6583 56.8602 15.7635C55.8711 16.2396 54.7575 16.3934 53.6764 16.2032C52.5952 16.013 51.601 15.4884 50.8338 14.7033C49.8544 13.6308 48.6696 12.7657 47.3498 12.1595C46.0299 11.5532 44.6018 11.218 43.15 11.1738C41.6982 11.1295 40.2523 11.3772 38.898 11.902C37.5437 12.4268 36.3085 13.2181 35.2656 14.229C33.8377 15.6119 32.7918 17.3407 32.2295 19.2473C31.6673 21.1539 31.6079 23.1736 32.0571 25.11C22.7106 25.668 16.2936 21.2319 11.16 15.1497C11.0058 14.975 10.804 14.8491 10.5794 14.7872C10.3548 14.7253 10.117 14.7302 9.89508 14.8012C9.67317 14.8722 9.47673 15.0063 9.32977 15.1871C9.18281 15.3679 9.09167 15.5876 9.06749 15.8193C8.08951 21.2442 8.79499 26.8385 11.0892 31.8508C13.3834 36.8631 17.1564 41.0534 21.9015 43.8588C18.7199 47.5076 14.2519 49.7866 9.43019 50.22C9.17187 50.2628 8.93341 50.3854 8.74818 50.5704C8.56295 50.7555 8.44023 50.9939 8.39718 51.2522C8.35413 51.5105 8.39292 51.7757 8.50811 52.0109C8.6233 52.246 8.80913 52.4393 9.03959 52.5636C13.2344 54.6599 17.8538 55.767 22.5432 55.8Z" fill="white"/>
          </svg>
        </div>
      </a>
    </div>
  </div>
</div>